Button
Triggers an action. Use a link for navigation.@gemologic/sheen · primitivesPlayground
<Button loading={false} size="md" tone="neutral" variant="ghost">Cancel</Button>Variant matrix
Quiet action
Primary action
Shortcut action
variant: solid
variant: soft
variant: outline
variant: ghost
variant: link
tone: neutral
tone: accent
tone: danger
tone: success
size: xs
size: sm
size: md
size: lg
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Button.tsx- Tokens
--sheen-button-radius--sheen-control-h-md--sheen-color-accent
Accessibility
Role: buttonKeyboard: Enter, SpaceDo
- Keep existing content visible while an action is pending.
Do not
- Do not use Button for URL navigation.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
variant | NonNullable<"solid" | "soft" | "outline" | "ghost" | "link" | undefined> | ghost | Visual treatment; solid accent actions should be rare. |
tone | NonNullable<"neutral" | "accent" | "danger" | "success" | undefined> | neutral | Semantic color role, independent of visual treatment. |
size | NonNullable<"xs" | "sm" | "md" | "lg" | undefined> | md | Density-aware control size. |
loading | boolean | false | Marks pending work and disables activation. |
shortcut | ShortcutAction | undefined | — | Typed shortcut registration whose action invokes this native button; omitted controls remain ordinary buttons. |