Buttons allow users to trigger actions with a single click. Use them for primary actions, form submissions, and navigation.
Basic Usage
import { Button } from "@soft-ui/react/button"
function Example() {
return <Button>Click me</Button>
}
Variants
Button supports multiple variants to convey different levels of emphasis:
- primary - High emphasis actions (default)
- secondary - Medium emphasis actions
- tertiary - Low emphasis with subtle shadow
- ghost - Minimal style for less prominent actions
- link - Styled as a link with accent color
- link-neutral - Link style with neutral color
- danger - Destructive or critical actions
import { Button } from "@soft-ui/react/button"
function Example() {
return (
<>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>
<Button variant="danger">Danger</Button>
</>
)
}
Sizes
Four sizes are available: xs, s, m (default), and l.
import { Button } from "@soft-ui/react/button"
function Example() {
return (
<>
<Button size="xs">Extra Small</Button>
<Button size="s">Small</Button>
<Button size="m">Medium</Button>
<Button size="l">Large</Button>
</>
)
}
Color Tones
Use the tone prop to apply feedback or decorative colors:
import { Button } from "@soft-ui/react/button"
function Example() {
return (
<>
<Button tone="info">Info</Button>
<Button tone="warning">Warning</Button>
<Button tone="danger">Danger</Button>
<Button tone="success">Success</Button>
</>
)
}
The tone prop applies color to the text while maintaining the button’s variant background.
API Reference
For complete prop documentation, see the Button API reference.