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 primary, secondary, tertiary, and neutral styles as Button. Good for toolbars and compact UI where space is tight.
Primary
Secondary
Tertiary
Neutral
A solid grey fill that stays visible at rest, unlike the transparent tertiary. For toolbar actions that deserve a button's full shape without the accent colour.
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