Buttons & CTAs / Button

Default Button

The primary action element of Badho DS. Supports filled, outlined, ghost, and tonal variants in violet and black, across small and medium sizes with loading, disabled, and full-width states.

V 1.0View in Storybook

Controls

Variant

Color

Size

Label

Leading icon

Trailing icon

Disabled

Full width

Variants

Variant × Color — SmallAll 4 variants across Violet and Black colors, size SM

violetblackfilledoutlinedghosttonal

Variant × Color — MediumAll 4 variants across Violet and Black colors, size MD

violetblackfilledoutlinedghosttonal

StatesEnabled · Disabled across all variants

filled

outlined

ghost

tonal

Full WidthFills the container width

Props

Name

Type

Default

variant

'filled' | 'outlined' | 'ghost' | 'tonal'

'filled'

color

'violet' | 'black' | 'neutral'

'violet'

size

'sm' | 'md'

'md'

disabled

boolean

false

fullWidth

boolean

false

iconLeft

ReactNode

—

iconRight

ReactNode

—

children

ReactNode

—

Code

import { Button } from '@/src/components/Button/Button'

<Button variant="filled" color="violet">Continue</Button>

<Button variant="outlined" color="violet" iconLeft={<InfoIcon />} iconRight={<AddIcon />}>
  Add Item
</Button>

<Button variant="filled" color="violet" fullWidth>Place Order</Button>