Button — Acun UI

01

Variants

The color is chosen with variant; the default primary is the primary color. Use primary for the main action on the page and danger for irreversible actions. secondary is a gray filled button; the white, bordered neutral button is white (Cancel, toolbars, pagination). ghost has no background or border, and only its text darkens on hover; it is for light actions such as "clear selection". link looks like a link (primary color, underlined on hover) but keeps the button's height. Solid buttons darken by one shade on hover.

LIVE EXAMPLE

<div class="flex flex-wrap gap-2">
    <acun:button>Save</acun:button>
    <acun:button variant="success">Confirm</acun:button>
    <acun:button variant="danger">Delete</acun:button>
    <acun:button variant="warning">Hold</acun:button>
    <acun:button variant="info">Info</acun:button>
    <acun:button variant="secondary">Archive</acun:button>
    <acun:button variant="dark">Draft</acun:button>
    <acun:button variant="light">Preview</acun:button>
    <acun:button variant="white">Cancel</acun:button>
    <acun:button variant="ghost">Clear selection</acun:button>
    <acun:button variant="link">View all</acun:button>
</div>

Prop	Values
`variant`	primary \| success \| danger \| warning \| info \| secondary \| dark \| light \| white \| ghost \| link

02

With shadow

When shadow is given to solid buttons (primary, success, danger, warning, info, secondary, dark, light), a soft shadow in the button's color appears below it; the shadow goes away on hover. Use it to make the single main action of the page stand out.

LIVE EXAMPLE

<div class="flex flex-wrap gap-3">
    <acun:button shadow>Save</acun:button>
    <acun:button variant="success" shadow>Confirm</acun:button>
    <acun:button variant="danger" shadow>Delete</acun:button>
    <acun:button variant="warning" shadow>Hold</acun:button>
    <acun:button variant="info" shadow>Info</acun:button>
    <acun:button variant="secondary" shadow>Archive</acun:button>
    <acun:button variant="dark" shadow>Draft</acun:button>
    <acun:button variant="light" shadow>Preview</acun:button>
</div>

Prop	Values
`shadow`	true \| false (solid buttons only)

03

Color table

Every color comes in three styles: solid (primary), outlined (outline-primary) and light-background (soft-primary). The names are consistent; to keep a color and change its style, change only the prefix.

LIVE EXAMPLE

<div class="grid gap-3">
    @foreach (['primary', 'success', 'danger', 'warning', 'info', 'secondary', 'dark'] as $color)
        <div class="flex flex-wrap items-center gap-2">
            <span class="w-16 text-xs font-medium text-gray-500 dark:text-zinc-400">{{ $color }}</span>
            <acun:button :variant="$color">Solid</acun:button>
            <acun:button :variant="'outline-'.$color">Outline</acun:button>
            <acun:button :variant="'soft-'.$color">Soft</acun:button>
        </div>
    @endforeach
</div>

Prop	Values
`colors`	primary · success · danger · warning · info · secondary · dark
`style`	(solid) · outline-{color} · soft-{color}

04

Changing the colors

The background, border, hover and shadow colors of solid buttons come from the --btn-* variables in panel.css. If you redefine them in your application's CSS file, all buttons change together. primary follows the primary color (--color-brand-600); the color chosen in the theme settings is applied to it as well.

CSS

/* resources/css/app.css, after panel.css */
:root {
    --btn-success-bg: #16a34a;
    --btn-success-hover: #15803d;
    --btn-success-shadow: rgb(22 163 74 / 60%);

    --btn-light-color: #334155; /* text color of the light button */
}

Prop	Values
`--btn-{variant}-bg · -hover · -shadow`	primary, success, danger, warning, info, secondary, dark, light
`--btn-{variant}-border · -hover-border`	Defaults to the background / hover color
`--btn-light-color`	Text color of the light button (white on the others)

05

Outline variants

Outline buttons are drawn with only a border and text color, and fill in on hover. When there are several colored actions in the same area, they look calmer than solid buttons.

LIVE EXAMPLE

<div class="flex flex-wrap gap-2">
    <acun:button variant="outline">Export</acun:button>
    <acun:button variant="outline-success">Undo</acun:button>
    <acun:button variant="outline-warning">Warn</acun:button>
    <acun:button variant="outline-danger">Delete Permanently</acun:button>
    <acun:button variant="outline-info">Details</acun:button>
    <acun:button variant="outline-secondary">Archive</acun:button>
    <acun:button variant="outline-dark">Activity</acun:button>
</div>

Prop	Values
`variant`	outline (outline-primary) \| outline-success \| outline-warning \| outline-danger \| outline-info \| outline-secondary \| outline-dark

06

Soft variants

Soft buttons are drawn with a light-colored background and switch to the full color on hover. They are easy on the eye where many buttons sit side by side, such as table rows and cards.

LIVE EXAMPLE

<div class="flex flex-wrap gap-2">
    <acun:button variant="soft">Filter</acun:button>
    <acun:button variant="soft-success">Delivered</acun:button>
    <acun:button variant="soft-warning">Postpone</acun:button>
    <acun:button variant="soft-danger">Remove</acun:button>
    <acun:button variant="soft-info">Details</acun:button>
    <acun:button variant="soft-secondary">Archive</acun:button>
    <acun:button variant="soft-dark">Draft</acun:button>
</div>

Prop	Values
`variant`	soft (soft-primary) \| soft-success \| soft-warning \| soft-danger \| soft-info \| soft-secondary (soft-gray) \| soft-dark

07

Sizes

The size is chosen with size; the default is md. sm is for tight spaces such as table rows and card headers. lg is both taller and wider, and its text is one size larger; it suits places that need to stand out, such as empty-state screens or a standalone main action on mobile.

LIVE EXAMPLE

<div class="flex flex-wrap items-center gap-2">
    <acun:button size="sm">Small</acun:button>
    <acun:button>Medium</acun:button>
    <acun:button size="lg">Large</acun:button>
</div>

Prop	Values
`size`	sm \| md \| lg \| icon

08

With icons

Put the icon in the slot together with the text; the gap between them is added automatically. For icon-only buttons, size="icon" draws a square button; since there is no visible text, remember to pass aria-label and title.

LIVE EXAMPLE

<div class="flex flex-wrap items-center gap-2">
    <acun:button><acun:icon name="plus" size="4" /> New order</acun:button>
    <acun:button variant="white"><acun:icon name="arrow-down-tray" size="4" /> Export to Excel</acun:button>
    <acun:button variant="outline" size="icon" aria-label="Edit" title="Edit">
        <acun:icon name="pencil-square" size="4" />
    </acun:button>
    <acun:button variant="soft-danger" size="icon" aria-label="Delete" title="Delete">
        <acun:icon name="trash" size="4" />
    </acun:button>
</div>

Prop	Values
`size`	icon (icon only)

09

States

loading adds a spinning icon before the text and sets aria-busy="true", but does not disable the button; use it together with disabled so it is not clicked again while the action runs. disabled fades the button and blocks clicks; hover, press and shadow do not work on a disabled button. Enabled buttons move down by 1 pixel when pressed.

LIVE EXAMPLE

<div class="flex flex-wrap items-center gap-2">
    <acun:button loading disabled>Saving</acun:button>
    <acun:button disabled>Disabled</acun:button>
    <acun:button variant="white" disabled>Disabled</acun:button>
</div>

Prop	Values
`loading`	true \| false
`disabled`	true \| false

10

Link and form button

When href is given, the button is rendered as an <a>; type and loading are not used in that case. Since a link cannot truly be disabled, passing disabled adds aria-disabled="true", removes the link from the Tab order and makes it unclickable. Inside a form, pass type="submit". To lock the button while a Livewire action runs, add wire:loading.attr="disabled".

BLADE

<acun:button :href="route('orders.index')" variant="white" wire:navigate>Back to list</acun:button>

<form wire:submit="save">
    …
    <acun:button type="submit" wire:loading.attr="disabled" wire:target="save">Save</acun:button>
</form>

Prop	Values
`href`	Renders an <a> when given
`type`	button \| submit \| reset

11

External link

On link buttons that go to another site, pass external together with href: the link opens in a new tab (target="_blank", rel="noopener"), a small arrow icon is added after the text, and screen readers are told "(opens in a new tab)". Icon-only buttons (size="icon") get no arrow, but the note is still read.

LIVE EXAMPLE

<div class="flex flex-wrap items-center gap-2">
    <acun:button href="https://laravel.com/docs" variant="white" external>Laravel docs</acun:button>
    <acun:button href="https://livewire.laravel.com/docs" variant="ghost" external>Livewire docs</acun:button>
</div>

Prop	Values
`external`	true \| false (with href)

12

Hiding on small screens

By default the button is rendered as inline-flex. If you give a display class (hidden, block, flex, grid, contents …) in class, it is used instead of the default; so class="hidden sm:inline-flex" hides the button on phones and shows it at sm and up. Use it on secondary actions to free up space on narrow screens.

LIVE EXAMPLE

<div class="flex flex-wrap items-center gap-2">
    <acun:button><acun:icon name="plus" size="4" /> New order</acun:button>
    <acun:button variant="white" class="hidden sm:inline-flex">
        <acun:icon name="arrow-down-tray" size="4" /> Export to Excel
    </acun:button>
</div>

Prop	Values
`class`	hidden sm:inline-flex · block · flex · grid …

API

Props and slots

The values the component accepts.

Prop	Default	Description
`variant`	`primary`	Solid: primary · success · danger · warning · info · secondary · dark · light — outline-* and soft-* in the same colors (outline = outline-primary, soft = soft-primary; gray = secondary) — neutral: white · ghost · link
`shadow`	`false`	A shadow in the button's own color below solid buttons; goes away on hover
`size`	`md`	sm · md · lg · icon
`href`	`null`	Renders an <a> when given
`external`	`false`	With href: opens in a new tab (target="_blank" rel="noopener"), adds an arrow icon and a screen reader note
`type`	`button`	button · submit · reset
`disabled`	`false`	Disables the button; with href, sets aria-disabled and tabindex="-1"
`loading`	`false`	Spinning icon and aria-busy="true"; does not disable
`appearance`	`null`	Form modal compatibility: outline (turns variant into outline-*) · text (ghost); use variant in new code
`(attributes)`	—	class and other attributes are added to the button; a display class in class (hidden, block, flex …) replaces the default inline-flex

Slots: default (button text and icon)