Variants
<Button variant="filled">Filled</Button>
<Button variant="light">Light</Button>
<Button variant="outline">Outline</Button>
<Button variant="subtle">Subtle</Button>
<Button variant="transparent">Transparent</Button>
<Button variant="default">Default</Button>
<Button variant="white">White</Button>
Sizes
<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>
Colors
<Button color="violet">violet</Button>
<Button color="blue">blue</Button>
<Button color="green">green</Button>
<Button color="red">red</Button>
<Button color="orange">orange</Button>
Light variant — colors
<Button variant="light" color="violet">violet</Button>
<Button variant="light" color="blue">blue</Button>
<Button variant="light" color="green">green</Button>
Gradient
<Button variant="gradient" gradient={{ from: 'violet', to: 'blue' }}>
Violet → Blue
</Button>
<Button variant="gradient" gradient={{ from: 'teal', to: 'green', deg: 105 }}>
Teal → Green
</Button>
<Button variant="gradient" gradient={{ from: 'orange', to: 'red' }}>
Orange → Red
</Button>
Radius
<Button radius="xs">xs</Button>
<Button radius="sm">sm</Button>
<Button radius="md">md</Button>
<Button radius="lg">lg</Button>
<Button radius="xl">xl</Button>
States
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>
Full width
<Button fullWidth>Full width button</Button>
Sections
<Button leftSection="←">Back</Button>
<Button rightSection="→">Next</Button>
<Button leftSection="⬇" rightSection="⬆">Both</Button>
Button.Group
<Button.Group>
<Button variant="default">First</Button>
<Button variant="default">Second</Button>
<Button variant="default">Third</Button>
</Button.Group>
Button.Group — vertical
<Button.Group orientation="vertical">
<Button variant="default">First</Button>
<Button variant="default">Second</Button>
<Button variant="default">Third</Button>
</Button.Group>
Button.GroupSection
Use Button.GroupSection to render non-button content inside a Button.Group:
<Button.Group>
<Button variant="default">⌄</Button>
<Button.GroupSection>135</Button.GroupSection>
<Button variant="default">⌃</Button>
</Button.Group>