Button

V 1.0View in Storybook

Button with 5 visual types × 3 sizes. Optional leading/trailing icons, loading and disabled states.

Playground

Type

Size

Children

Leading Icon

Trailing Icon

Disabled

URL

https://design-system-ashu.vercel.app/iframe.html?id=components-button--playground&viewMode=story&args=type%3Aprimary%3Bsize%3Amd%3Bchildren%3AButton+Text%3BleadingIcon%3A%21true%3BtrailingIcon%3A%21true%3Bloading%3A%21false%3Bdisabled%3A%21false

Code

<Button
  type="primary"
  size="md"
  leadingIcon
  trailingIcon
  loading={false}
  disabled={false}
>
  Button Text
</Button>

Props

Name	Type	Default
`type`	`'primary' \| 'outline' \| 'secondary' \| 'ghost' \| 'danger'`	`'primary'`
`size`	`'small' \| 'md' \| 'big'`	`'md'`
`children`	`string`	`'Button Text'`
`leadingIcon`	`boolean`	`true`
`trailingIcon`	`boolean`	`true`
`loading`	`boolean`	`false`
`disabled`	`boolean`	`false`

Usage guidelines

When to use

Use primary for the single most important action on a surface — one primary per view.
Use outline or secondary for supporting actions that sit alongside a primary.
Ghost works well in toolbars or dense layouts where visual weight needs to stay low.
Show the loading state while an async action is in progress to prevent double-submits.

When not to use

Don't place two primary buttons side by side — it dilutes hierarchy.
Avoid using a button for navigation; use a link instead.
Don't use danger unless the action is destructive and irreversible.