Base ยท SAHI Design System

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

PropTypeDefaultDescription
variantprimary | secondary | outline | ghost | buy | sellprimaryVisual style. buy = green, sell = red (filled only).
sizesm | md | lgmdPadding and font size.
fullWidthbooleanfalseStretch to fill the container (btn--block).
disabledbooleanfalseDisables interaction.
asChildbooleanfalseRender 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.css tokens.