Skip to main content
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.