Button

Main interactive button. Variants, sizes, loading state, icons.

Examples

Variants

Five built-in variants for different intents.

<Button>Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="soft">Soft</Button>
<Button variant="destructive">Destructive</Button>

Sizes

<Button size="sm">Small</Button>
<Button>Default</Button>
<Button size="lg">Large</Button>

With icons

leftIcon and rightIcon accept any React node.

<Button leftIcon={<Star size={16} />}>Star repo</Button>
<Button rightIcon={<ArrowRight size={16} />}>Continue</Button>
<Button variant="destructive" leftIcon={<Trash2 size={16} />}>Delete</Button>

Loading

Pass loading to show a spinner. Optionally use loadingText.

<Button loading>Loading…</Button>
<Button loading loadingText="Saving…" variant="outline">Save</Button>

Disabled

<Button disabled>Disabled</Button>

API Reference

Props of the Button component.

Prop	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'ghost' \| 'soft' \| 'destructive'`	`'default'`	Visual style.
`size`	`'sm' \| 'default' \| 'lg'`	`'default'`	—
`loading`	`boolean`	`false`	Shows spinner and disables interaction.
`loadingText`	`string`	—	Optional text shown while loading.
`leftIcon`	`ReactNode`	—	Icon rendered before the children.
`rightIcon`	`ReactNode`	—	Icon rendered after the children.
`asChild`	`boolean`	`false`	Render-as-child via Radix Slot. Useful for wrapping <Link>.
`disabled`	`boolean`	`false`	—