button
The main action control. With href it renders a link.
Example
Laravel
<x-admin::toolbar>
<x-admin::button variant="primary" icon="plus">New segment</x-admin::button>
<x-admin::button>Cancel</x-admin::button>
<x-admin::button variant="outline">Preview</x-admin::button>
<x-admin::button variant="ghost">Skip</x-admin::button>
<x-admin::button variant="destructive">Delete</x-admin::button>
<x-admin::button variant="link" href="#">View history</x-admin::button>
</x-admin::toolbar>
<x-admin::stack gap="2" class="mt" style="max-width:20rem">
<x-admin::button block icon="plus">New segment</x-admin::button>
<x-admin::button variant="primary" block icon="search">Look up user</x-admin::button>
</x-admin::stack>
<x-admin::toolbar class="mt">
<x-admin::button variant="primary" size="xs">Extra small</x-admin::button>
<x-admin::button variant="primary" size="sm">Small</x-admin::button>
<x-admin::button variant="primary">Default</x-admin::button>
<x-admin::button variant="primary" size="lg">Large</x-admin::button>
<x-admin::button variant="primary" loading>Saving</x-admin::button>
<x-admin::button disabled>Disabled</x-admin::button>
<x-admin::button shape="square" icon="edit" aria-label="Edit" />
<x-admin::button shape="circle" icon="plus" aria-label="Add" />
</x-admin::toolbar>Props
| Prop | Required | Default | Options |
|---|---|---|---|
variant | "secondary" | primary, secondary, outline, ghost, destructive, link | |
size | null | xs, sm, lg | |
shape | null | square, circle | |
href | null | ||
type | "button" | ||
icon | null | ||
loading | false | ||
block | false |
Other attributes, such as wire:model or data-*, pass through to the element.
Other stacks
React and Vue: import { Button } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.
HTML, for any stack
<div class="adm-toolbar" role="toolbar"><button type="button" class="adm-btn adm-btn--primary" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>New segment</button>
<button type="button" class="adm-btn adm-btn--secondary" >Cancel</button>
<button type="button" class="adm-btn adm-btn--outline" >Preview</button>
<button type="button" class="adm-btn adm-btn--ghost" >Skip</button>
<button type="button" class="adm-btn adm-btn--destructive" >Delete</button>
<a href="#" class="adm-btn adm-btn--link">View history</a></div>
<div class="adm-stack mt" style="gap:var(--ad-space-2); max-width:20rem;"><button type="button" class="adm-btn adm-btn--secondary adm-btn--block" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>New segment</button>
<button type="button" class="adm-btn adm-btn--primary adm-btn--block" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>Look up user</button></div>
<div class="adm-toolbar mt" role="toolbar"><button type="button" class="adm-btn adm-btn--primary adm-btn--xs" >Extra small</button>
<button type="button" class="adm-btn adm-btn--primary adm-btn--sm" >Small</button>
<button type="button" class="adm-btn adm-btn--primary" >Default</button>
<button type="button" class="adm-btn adm-btn--primary adm-btn--lg" >Large</button>
<button type="button" class="adm-btn adm-btn--primary" aria-busy="true" >Saving</button>
<button type="button" class="adm-btn adm-btn--secondary" disabled="disabled" >Disabled</button>
<button type="button" class="adm-btn adm-btn--secondary adm-btn--square" aria-label="Edit" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4z"/></svg></button>
<button type="button" class="adm-btn adm-btn--secondary adm-btn--circle" aria-label="Add" ><svg class="adm-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg></button></div>