CardFilter

Usage

import { CardFilter } from '@acronis-platform/ui-react';

CardFilter is a compact card showing a caption label above a prominent value (with an optional leading icon). The clickable variant renders a <button> with hover/active/focus treatments and is polymorphic via Base UI's useRender (the render prop); static / static-empty are presentational. Themed by the --ui-card-filter-* tokens.

Examples

A static stat card:

<CardFilter label="Active devices" value="1,284" />

A clickable filter (renders a button) with an icon. selected is controlled — flip it in onClick to toggle the active styling:

import { useState } from 'react';
import { ShieldIcon } from '@acronis-platform/icons-react/stroke-mono';

const [selected, setSelected] = useState(false);

<CardFilter
  variant="clickable"
  label="Protected"
  value="982"
  icon={<ShieldIcon />}
  selected={selected}
  onClick={() => setSelected((prev) => !prev)}
/>

selected is optional. Omit it for a plain action card that runs a command instead of toggling a filter — the card then keeps default button semantics (no aria-pressed) rather than announcing as an unpressed toggle:

<CardFilter variant="clickable" label="Alerts" value="7" onClick={openAlerts} />

An empty placeholder (renders an em-dash, no icon):

<CardFilter variant="static-empty" label="Pending" />

Render as another element with render (Base UI composition) — e.g. a filter that navigates:

<CardFilter
  variant="clickable"
  label="Alerts"
  value="7"
  render={<a href="/alerts" />}
/>

Accessibility

aria-pressed and type="button" apply only to the default <button> root, and aria-pressed only when selected is passed explicitly — that pairing would be invalid ARIA/HTML on a link or other element, so both are omitted when you compose via render. The data-selected styling hook is still set regardless of the rendered element, so a selected card composed as a link keeps its active treatment.

API Reference