Pill action

55 · Extended UI

An action button with a colored round badge and a label. It is used on mobile screens to offer a few quick actions side by side, at equal width.

PRO acun:pill-action

Basic usage

The content of the badge (an icon or a single character) comes from the slot, and the text below it from label. The buttons grow to share their row equally; place them side by side inside a flex container.

LIVE EXAMPLE

<div class="flex flex-wrap">
    <acun:pill-action label="Approve" variant="success"><acun:icon name="check" size="3.5" /></acun:pill-action>
    <acun:pill-action label="Hold" variant="warning"><acun:icon name="exclamation-triangle" size="3.5" /></acun:pill-action>
    <acun:pill-action label="Address"><acun:icon name="map-pin" size="3.5" /></acun:pill-action>
    <acun:pill-action label="Cancel" variant="danger"><acun:icon name="x-mark" size="3.5" /></acun:pill-action>
</div>

Prop	Values
`label`	Text of the button

Colors

The badge color is chosen with variant: the same palette names as buttons, default info. Match colors to their meaning: success for a positive result, warning for a warning, danger for a rejection, info for information. The old names (emerald, amber, red, blue) also work.

LIVE EXAMPLE

<div class="flex flex-wrap">
    <acun:pill-action label="Success" variant="success">1</acun:pill-action>
    <acun:pill-action label="Warning" variant="warning">2</acun:pill-action>
    <acun:pill-action label="Danger" variant="danger">3</acun:pill-action>
    <acun:pill-action label="Info">4</acun:pill-action>
    <acun:pill-action label="Primary" variant="primary">5</acun:pill-action>
</div>

Prop	Values
`variant`	primary \| secondary \| success \| danger \| warning \| info \| dark

Emphasized and disabled

emphasized makes the badge solid green and darkens the text; it highlights the recommended action in the row. The emphasis is always green, regardless of the variant value. disabled fades the button and makes it unclickable.

LIVE EXAMPLE

<div class="flex flex-wrap">
    <acun:pill-action label="Approve" emphasized><acun:icon name="check" size="3.5" /></acun:pill-action>
    <acun:pill-action label="Hold" variant="warning"><acun:icon name="exclamation-triangle" size="3.5" /></acun:pill-action>
    <acun:pill-action label="Address" disabled><acun:icon name="map-pin" size="3.5" /></acun:pill-action>
</div>

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

With Livewire

By default the button renders type="button"; attributes such as wire:click go straight to the button.

BLADE

<div class="flex flex-wrap">
    <acun:pill-action label="Approve" emphasized wire:click="approve({{ $order->id }})">
        <acun:icon name="check" size="3.5" />
    </acun:pill-action>
    <acun:pill-action label="Hold" variant="warning" wire:click="hold({{ $order->id }})">
        <acun:icon name="exclamation-triangle" size="3.5" />
    </acun:pill-action>
</div>

API

Props and slots

The values the component accepts.

Prop	Default	Description
`label`	`null`	Text of the button
`variant`	`info`	primary · secondary · success · danger · warning · info · dark (emerald, amber, red, blue also work)
`emphasized`	`false`	Solid green badge and dark text (independent of variant)
`disabled`	`false`	Faded and unclickable

Slots: default (content of the badge: an icon or a single character)