Primary buttons are solid-filled for the highest-emphasis actions. Secondary buttons have a border and fill on hover. Tertiary buttons are transparent and blend into the surface for lower-priority options. Neutral buttons keep the solid fill in quiet grey, for actions that deserve a button's full shape without the accent colour. Destructive buttons signal dangerous or irreversible actions like delete and remove. All variants come in default and compact sizes.
Primary
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Secondary
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Tertiary
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Neutral
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Destructive
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Primary, compact
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Secondary, compact
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Tertiary, compact
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Neutral, compact
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
Destructive, compact
No iconIcon, leftIcon, rightBoth iconsDisabledDefaultHoverActive
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