Button

A button with multiple variants, sizes, and icon support.

Variants

<x-boson::button>Primary</x-boson::button>
<x-boson::button variant="secondary">Secondary</x-boson::button>
<x-boson::button variant="outline">Outline</x-boson::button>
<x-boson::button variant="ghost">Ghost</x-boson::button>
<x-boson::button variant="subtle">Subtle</x-boson::button>
<x-boson::button variant="danger">Danger</x-boson::button>
<x-boson::button variant="danger-soft">Danger Soft</x-boson::button>

Sizes

<x-boson::button variant="outline" size="xs">Extra Small</x-boson::button>
<x-boson::button variant="outline" size="sm">Small</x-boson::button>
<x-boson::button variant="outline" size="md">Medium</x-boson::button>
<x-boson::button variant="outline" size="lg">Large</x-boson::button>
<x-boson::button variant="outline" size="xl">Extra Large</x-boson::button>

With icons

<x-boson::button variant="outline" icon="check">Save</x-boson::button>
<x-boson::button variant="outline" icon:trailing="arrow-right">Next</x-boson::button>
<x-boson::button variant="outline" icon="plus" square />

Props

Prop	Type	Default	Description
`variant`	`string`	`primary`	Visual style: primary, secondary, outline, ghost, subtle, danger, danger-soft
`size`	`string`	`md`	Button size: xs, sm, md, lg, xl
`icon`	`string`	`null`	Leading Heroicon name
`icon:trailing`	`string`	`null`	Trailing Heroicon name
`square`	`bool`	`false`	Square shape for icon-only buttons