Button

Usage

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

Button renders a native <button> styled by the --ui-button-* design tokens. It is polymorphic via Base UI's useRender — pass the render prop to render it as another element (e.g. a router link) while keeping the button styling and merged props.

Examples

Variants map to the Figma "Button" set. The default is default (primary):

<Button variant="default">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">Learn more</Button>
<Button variant="destructive">Delete</Button>
<Button variant="ai">Ask AI</Button>

Every variant renders its children verbatim — no icon is injected automatically. Pass an icon explicitly as part of the children when you want one (the ai variant included):

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

<Button variant="default">
  <PlusIcon />
  Add item
</Button>

Disabled state uses dedicated disabled tokens (not opacity):

<Button variant="default" disabled>
  Save
</Button>

Render as another element with render (Base UI composition):

<Button render={<a href="/dashboard" />}>Go to dashboard</Button>

API Reference