An icon-only button in a circular shape
For actions where a label is not needed, like close, menu, or navigation arrows. Uses the same two props as Button: variant for the emphasis (primary, secondary, tertiary) and tone for the colour (default, neutral or destructive). Good for toolbars and compact UI where space is tight.
Primary
Secondary
Tertiary
Primary, neutral
A solid grey fill that stays visible at rest, unlike the transparent tertiary, with a button's full shape and no accent colour.
Secondary, neutral
The outlined shape with a grey edge in place of the accent, for utility controls such as toolbar actions and a notification bell. Hover and press fill it with the neutral greys.
Primary, destructive
The filled circle in the danger colour, for the one irreversible action a surface leads with.
Secondary, destructive
For dangerous or irreversible actions like delete. The outline and icon take the danger colour, and hover and press fill with it.
Tooltip
An icon-only control names itself: every circular button shows a tooltip with its accessible label on hover and focus. Pass tooltip a string for different wording, false to opt out when the host labels the control another way, and tooltipPosition to pick the side when an edge would clip the default placement above.
Loading
Set loading while an async action runs. The spinner replaces the icon in the variant’s own colour and interaction is blocked, without the dimmed disabled look.
Compact
// From the npm package
import { CircularButton } from 'rift-ds/components/CircularButton/CircularButton';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/circular-button.json