The main action element
Two props set a button's look. variant is the emphasis: primary buttons are solid-filled for the highest-emphasis actions, secondary buttons have a border and fill on hover, and tertiary buttons are transparent and blend into the surface for lower-priority options. tone is the colour: the default carries the action colour, neutral moves the same shape into quiet grey for actions that deserve a button's full shape without the accent, and destructive signals dangerous or irreversible actions like delete and remove. Every combination comes in default and compact sizes.
Primary
Secondary
Tertiary
Primary, neutral
Secondary, neutral
Primary, destructive
Secondary, destructive
Primary, compact
Secondary, compact
Tertiary, compact
Primary, neutral, compact
Secondary, neutral, compact
Primary, destructive, compact
Secondary, destructive, compact
Loading
Set loading while an async action runs. The spinner takes the left icon slot in the variant’s own colour, the label stays put, and clicks are blocked, without the dimmed look of disabled.
// From the npm package
import { Button } from 'rift-ds/components/Button/Button';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/button.json