Runs an action or toggles state from an icon in toolbars and table rows.
import { Plus as PlusIcon } from '@phosphor-icons/react';
<IconButton aria-label="Add item">
<PlusIcon aria-hidden />
</IconButton>pnpm add @usefragments/uiImport styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.
Transparent, then the neutral tint.
import { Plus as PlusIcon } from '@phosphor-icons/react';
import { Stack } from '@usefragments/ui';
<Stack direction="row" gap="sm" align="center">
<IconButton aria-label="Add item" variant="ghost">
<PlusIcon aria-hidden />xs for in-row actions, lg for primary chrome.
import { Plus as PlusIcon } from '@phosphor-icons/react';
import { Stack } from '@usefragments/ui';
<Stack direction="row" gap="sm" align="center">
<IconButton aria-label="Add item" size="xs">
<PlusIcon aria-hidden />A real toggle: the pressed state is owned by the caller and reported through aria-pressed.
import { PushPin as PinIcon } from '@phosphor-icons/react';
const [pinned, setPinned] = React.useState(false);
<IconButton aria-label="Pin item" pressed={pinned} onPressedChange={setPinned}>
<PinIcon aria-hidden />Unavailable action, out of the tab order.
import { Trash as TrashIcon } from '@phosphor-icons/react';
<IconButton aria-label="Delete row" disabled>
<TrashIcon aria-hidden />
</IconButton>Work is running; the spinner takes the glyph's place.
import { ArrowsClockwise } from '@phosphor-icons/react';
<IconButton aria-label="Syncing" pending>
<ArrowsClockwise aria-hidden />
</IconButton>Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | React.ReactNode | Not set | Icon element rendered inside the button |
defaultPressed | boolean | undefined | Not set | Initial pressed state of an uncontrolled toggle |
nativeButton | boolean | undefined | Not set | Whether the rendered element is a native `<button>`. Inferred from an element passed to `render` (a `<button>`, or a component without `href`). |
onPressedChange | ((pressed: boolean) => void) | undefined | Not set | Called with the next pressed state |
pending | boolean | undefined | Not set | Work is running: aria-busy, presses ignored, a spinner replaces the glyph after a second |
pressed | boolean | undefined | Not set | Controlled pressed state; any of pressed, defaultPressed or onPressedChange makes the button a toggle with aria-pressed |
render | useRender.RenderProp<Record<string, unknown>> | undefined | Not set | Replace the rendered element, e.g. an anchor or a router link; a rendered anchor keeps link semantics and takes the look, pending and disabled behaviour |
size | "xs" | "sm" | "md" | "lg" | undefinedxssmmdlg | "md" | Square control on the one track: xs 24, sm 28, md 32, lg 40 |
value | string | undefined | Not set | Form value of the button, or the toggle's value inside a group. |
variant | "soft" | "ghost" | undefinedsoftghost | ghost | ghost is transparent at rest; soft is the neutral tint shared with Button soft |
aria-label | string | undefined | Not set | Accessible action name when no labelled-by relationship is available |
aria-labelledby | string | undefined | Not set | ID reference for an external accessible action label |
disabled | boolean | undefined | Not set | — |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | Not set | — |
type | "button" | "submit" | "reset" | undefinedbuttonsubmitreset | button | — |