Button components
Free and open-source Tailwind CSS button components built for modern applications and websites. These buttons are built using HTML and Tailwind CSS.
Core palette
<Button>Default</Button>
<Button variant="accent">Accent</Button>
<Button variant="accentDark">Accent Dark</Button>
<Button variant="muted">Muted</Button>
<Button variant="alternative">Alternative</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="text">Text</Button>
<Button variant="link">Link</Button>Semantic statuses
<Button variant="info">Info</Button>
<Button variant="success">Success</Button>
<Button variant="warning">Warning</Button>
<Button variant="danger">Danger</Button>Size scale
<Button size="xxs">Size xxs</Button>
<Button size="xs">Size xs</Button>
<Button size="sm">Size sm</Button>
<Button size="base">Size base</Button>
<Button size="md">Size md</Button>
<Button size="lg">Size lg</Button>
<Button size="xl">Size xl</Button>Icon layouts
<Button variant="accent" gap="xs">
<Plus slot="left-icon" size="sm" />
Launch project
</Button>
<Button variant="outline" gap="xs">
Next step
<ArrowRight slot="right-icon" size="sm" />
</Button>
<Button variant="icon" iconOnly aria-label="Search">
<SearchIcon slot="left-icon" size="sm" />
</Button>
<Button variant="onlyIcon" iconOnly aria-label="Alerts">
<AlertTriangle slot="left-icon" size="sm" />
</Button>State helpers
<Button loading variant="outline">Saving…</Button>
<Button disabled variant="ghost">Disabled</Button>
<Button variant="accent" iconOnly aria-label="Add">
<Plus slot="left-icon" size="sm" />
</Button>
<Button fullWidth variant="default">Continue</Button>Rounding helpers
<Button variant="outline" noRounded>noRounded</Button>
<Button variant="outline" noRoundedLeft>noRoundedLeft</Button>
<Button variant="outline" noRoundedRight>noRoundedRight</Button>
<Button variant="outline" noRoundedTop>noRoundedTop</Button>
<Button variant="outline" noRoundedBottom>noRoundedBottom</Button>