<Button>Click me</Button>Examples
Sizes
Use the size prop to change the size of the button.
<div className="flex flex-wrap items-center gap-2">
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>
</div>Variants
Use the variant prop to change the visual style of the Button.
<div className="flex gap-2">
<Button variant="solid">Solid</Button>
<Button variant="subtle">Subtle</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
</div>Icon
Use icons within a button.
<div className="flex gap-2">
<Button variant="solid">
<LuMail size={16} />
Email
</Button>
<Button variant="outline">
Call us <LuArrowRight size={16} />
</Button>
</div>Disabled
Use the disabled prop to disable the button.
<Button disabled>Button</Button>Loading
Pass the loading and loadingText props to show a spinner and optional loading text.
<div className="flex gap-2">
<Button loading>Click me</Button>
<Button loading loadingText="Saving...">
Click me
</Button>
</div>Spinner Placement
Use the spinnerPlacement prop to change the spinner’s position.
<div className="flex gap-2">
<Button loading loadingText="Loading" spinnerPlacement="start">
Submit
</Button>
<Button loading loadingText="Loading" spinnerPlacement="end">
Continue
</Button>
</div>