All buttons
This page is an example on how to document your button components, most of the copy was written by AI so don’t take it very seriously.
Find the code for this page in the src/pages/components/buttons.md file.
<button class="btn-primary btn-normal">Primary</button><button class="btn-secondary btn-normal">Secondary</button><button class="btn-tertiary btn-normal btn-medium-hover">Tertiary</button><button class="btn-text btn-sm">Text</button><button class="btn-tag btn-xs">Tag Name</button><button class="btn-primary btn-normal rounded-full">Primary</button><button class="btn-secondary btn-normal rounded-full">Secondary</button><button class="btn-tertiary btn-normal btn-medium-hover rounded-full">Tertiary</button><button class="btn-text btn-sm rounded-full">Text</button><button class="btn-tag btn-xs rounded-full">Tag Name</button>Primary button <button>
We use the primary button for main actions like saving a form or creating a new item.
<button class="btn-primary btn-normal">Primary</button><button class="btn-primary btn-sm">Primary</button><button class="btn-primary btn-xs">Primary</button>Secondary button
Secondary buttons accompany primary buttons to provide additional actions. For example, cancel buttons are secondary buttons.
<button class="btn-secondary btn-normal">Secondary</button><button class="btn-secondary btn-sm">Secondary</button><button class="btn-secondary btn-xs">Secondary</button>Text button
Text buttons are used for actions that do not require a primary or secondary button.
<button class="btn-text btn-normal">Text button</button>Link tertiary
<button class="btn-tertiary btn-normal btn-medium-hover">Tertiary</button><button class="btn-tertiary btn-sm btn-medium-hover">Tertiary</button><button class="btn-tertiary btn-xs btn-medium-hover">Tertiary</button>Tertiary with icon
<a href="#" class="btn-tertiary btn-normal btn-medium-hover">
Read more
<span class="i-la-arrow-right ml-2 text-2xl -my-1 -mr-1"></span>
</a><a href="#" class="btn-tertiary btn-sm btn-medium-hover">
Read more
<span class="i-la-arrow-right ml-2 text-2xl -my-1 -mr-1"></span>
</a><a href="#" class="btn-tertiary btn-xs btn-medium-hover px-5">
Read more
<span class="i-la-arrow-right ml-2 text-2xl -my-1 -mr-1"></span>
</a>Rounded button
Rounded edges — add rounded prop, or rounded-full class for raw HTML.
<button class="btn-primary btn-normal rounded-full">Primary</button><button class="btn-secondary btn-normal rounded-full">Secondary</button><button class="btn-tertiary btn-normal btn-medium-hover rounded-full">Tertiary</button><button class="btn-text btn-normal rounded-full">Text</button><button class="btn-tag btn-normal rounded-full">Tag Name</button>Outline button
Outlined variants of the three button styles.
<button class="btn-primary-outline btn-normal" title="Title">Text button</button><button class="btn-primary-outline btn-normal rounded-full" title="Title">Text button</button><button class="btn-secondary-outline btn-normal" title="Title">Text button</button><button class="btn-secondary-outline btn-normal rounded-full" title="Title">Text button</button><button class="btn-tertiary-outline btn-normal btn-medium-hover" title="Title">Text button</button><button class="btn-tertiary-outline btn-normal btn-medium-hover rounded-full" title="Title">Text button</button><button class="btn-tertiary-outline btn-normal btn-medium-hover border-2" title="Title">Text button</button>Outline button - custom hover
<button class="btn-tertiary-outline btn-normal btn-light-hover rounded-full" title="Title">Text button</button><button class="btn-tertiary-outline btn-normal btn-medium-hover rounded-full" title="Title">Text button</button><button class="btn-tertiary-outline btn-normal btn-dark-hover rounded-full" title="Title">Text button</button><button class="btn-tertiary-outline btn-normal btn-white-hover rounded-full" title="Title">Text button</button>Link button <a>
Passing href renders the button as an <a> element — same styling, anchor semantics.
<a href="#" class="btn-primary btn-normal" title="Title">Text button</a>Circle button
Circle buttons are perfect for icon-only actions, maintaining equal width and height.
<button class="btn-primary btn-normal btn-circle">
<span class="i-la-arrow-right"></span>
</button><button class="btn-secondary btn-normal btn-circle">
<span class="i-la-arrow-right"></span>
</button><button class="btn-tertiary btn-normal btn-medium-hover btn-circle">
<span class="i-la-arrow-right"></span>
</button><!-- Size modifiers: btn-sm (medium), btn-xs (small) -->
<button class="btn-primary btn-sm btn-circle">
<span class="i-la-arrow-right text-xl"></span>
</button><button class="btn-primary btn-xs btn-circle">
<span class="i-la-arrow-right text-lg"></span>
</button>Circle outline buttons
<button class="btn-primary-outline btn-normal btn-circle">
<span class="i-la-arrow-right text-2xl"></span>
</button><button class="btn-secondary-outline btn-normal btn-circle">
<span class="i-la-arrow-right text-2xl"></span>
</button><button class="btn-tertiary-outline btn-normal btn-medium-hover btn-circle">
<span class="i-la-arrow-right text-2xl"></span>
</button>CSS Class Reference
All variants in one place — copy any combination into plain HTML.
Size modifiers: btn-normal (default), btn-sm (medium), btn-xs (small).
<!-- Solid variants -->
<button class="btn-primary btn-normal">Primary</button>
<button class="btn-secondary btn-normal">Secondary</button>
<button class="btn-tertiary btn-normal">Tertiary</button>
<!-- Outline variants -->
<button class="btn-primary-outline btn-normal">Primary outline</button>
<button class="btn-secondary-outline btn-normal">Secondary outline</button>
<button class="btn-tertiary-outline btn-normal">Tertiary outline</button>
<!-- Sizes -->
<button class="btn-primary btn-normal">Large</button>
<button class="btn-primary btn-sm">Medium</button>
<button class="btn-primary btn-xs">Small</button>
<!-- Rounded -->
<button class="btn-primary btn-normal rounded-full">Rounded</button>
<!-- Circle (icon-only) -->
<button class="btn-primary btn-normal btn-circle">
<span class="i-la-arrow-right"></span>
</button>
<!-- Link rendered as <a> -->
<a href="/path" class="btn-primary btn-normal">Link button</a>
<!-- Tag / pill -->
<button class="btn-tag">Tag label</button>Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
primary | boolean | false | Primary solid button style |
secondary | boolean | false | Secondary solid button style |
tertiary | boolean | false | Tertiary / ghost button style |
primaryOutline | boolean | false | Primary outline variant |
secondaryOutline | boolean | false | Secondary outline variant |
tertiaryOutline | boolean | false | Tertiary outline variant |
text | boolean | false | Underline-on-hover text button |
tag | boolean | false | Pill-shaped tag button |
small | boolean | false | Extra-small size (btn-xs) |
medium | boolean | false | Medium size (btn-sm) |
rounded | boolean | true | Legacy no-op. All SDS button shortcuts bake `rounded-full` into their base layout — pill shape is the universal default. Use `sharp` to opt out. |
sharp | boolean | false | Applies `!rounded-none` to force sharp corners (overrides the default pill shape). |
circle | boolean | false | Equal width/height circle — for icon-only buttons |
href | string | undefined | Renders as <a> tag when provided |
title | string | undefined | Native title attribute |