Default Button
default-button.tsx
<Button>Primary</Button>Button
The Button component is used to trigger actions.
Usage & Examples
Visual variants
Themes
primary
secondary
tertiary
quaternary
States
success
warning
error
info
Sizes
xs
small
medium
large
Variants
solid
outline
glass
Rounding
none
medium
large
Shadows
none
light
strong
visual-variants.tsx
// Themes
<Button theme="primary">Primary</Button>
<Button theme="secondary">Primary</Button>
<Button theme="tertiary">Primary</Button>
<Button theme="quaternary">Primary</Button>
// States
<Button state="success">Primary</Button>
<Button state="warning">Primary</Button>
<Button state="error">Primary</Button>
<Button state="info">Primary</Button>
// Sizes
<Button size="xs">Primary</Button>
<Button size="small">Primary</Button>
<Button size="medium">Primary</Button>
<Button size="large">Primary</Button>
// Variants
<Button variant="solid">Primary</Button>
<Button variant="outline">Primary</Button>
<Button variant="glass">Primary</Button>
// Rounding
<Button rounding="none">Primary</Button>
<Button rounding="medium">Primary</Button>
<Button rounding="large">Primary</Button>
// Shadows
<Button shadow="none">Primary</Button>
<Button shadow="light">Primary</Button>
<Button shadow="strong">Primary</Button>Interaction states
Disabled
Loading
Full width
interaction-states.tsx
// Disabled
<Button disabled>Primary</Button>
// Loading
<Button loading>Primary</Button>
// Full width
<Button fullWidth>Primary</Button>