Button
Buttons are used to trigger actions. They come in many sizes and flavors.
<ui-button text="Click me!" variant="primary" />
Text#
You can set the button text with a text prop or by using the component like an HTML tag pair.
<ui-button>HTMLy</ui-button>
<ui-button text="Propy" />
Variants#
Use the variant prop to change the appearance of the button.
<ui-button>Default</ui-button>
<ui-button variant="primary">Primary</ui-button>
<ui-button variant="danger">Danger</ui-button>
<ui-button variant="filled">Filled</ui-button>
<ui-button variant="ghost">Ghost</ui-button>
Sizes#
Use the size prop to change the size of the button.
<ui-button>Base</ui-button>
<ui-button size="sm">Small</ui-button>
<ui-button size="xs">Extra Small</ui-button>
Icons#
Automatically sized and styled icons are available for your buttons using the icon or icon-append props. You can also compose your own buttons with icons by nesting an icon component.
<ui-button icon="dots" />
<ui-button icon-append="arrow-right">
Continue
</ui-button>
<ui-button>
<ui-icon name="clipboard" />
</ui-button>
Round#
Round buttons have their place too — like Bard set pickers. Just set the round prop.
<ui-button icon="plus" round></ui-button>
<ui-button icon="plus" round size="sm"></ui-button>
<ui-button icon="plus" round size="xs"></ui-button>
Loading#
Show an animated loading icon during network requests.
<ui-button loading text="Save" />
Full Width#
Fill that container with nothing but button.
<ui-button variant="primary" class="w-full">
Save & Continue
</ui-button>
Button Groups#
Group buttons together to create a cohesive set of actions.
<ui-button-group>
<ui-button variant="default">Oldest</ui-button>
<ui-button variant="default">Newest</ui-button>
<ui-button variant="default">Top</ui-button>
</ui-button-group>
Icon Groups#
Group icons together.
<ui-button-group>
<ui-button icon="paragraph-align-left"></ui-button>
<ui-button icon="paragraph-align-center"></ui-button>
<ui-button icon="paragraph-align-right"></ui-button>
</ui-button-group>
Attached Button#
Attach a button to the side of a button to make it a double complete button.
<ui-button-group>
<ui-button variant="primary">Create Entry</ui-button>
<ui-button icon="chevron-down" variant="primary"></ui-button>
</ui-button-group>
As a Link#
Buttons can be used as links by passing an href prop.
<ui-button href="https://statamic.com" icon-append="arrow-up-right">
Visit Statamic.com
</ui-button>
Inset#
When using ghost or subtle button variants, you can use the inset prop to remove any invisible padding for better alignment.
<ui-button size="sm" icon="x" variant="ghost" inset></ui-button>
<ui-button size="sm" icon="checkmark" variant="ghost" inset></ui-button>
