Components ยท UI Primitives
Button
Solid black/white CTA at full radius; secondary & purple-stroke outline.
Variants
Sizes
States
Full width
Buy / Sell — filled only
Buy / Sell — full width
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | primary | secondary | outline | ghost | buy | sell | primary | Visual style. buy = green, sell = red (filled only). |
size | sm | md | lg | md | Padding and font size. |
fullWidth | boolean | false | Stretch to fill the container (btn--block). |
disabled | boolean | false | Disables interaction. |
asChild | boolean | false | Render as the child element (link/anchor). |
Reference API for the design concept — align names and types with your implementation.
Guidelines
- Use in the active theme; the component adapts to light and dark automatically.
- Keep the purple accent for interactive states only โ never as a fill or background.
- Copy the markup from the Code tab and wire it to
base.csstokens.