Skip to content
UI Brok

Loading…

No results

Browse catalog

Button

Trigger an action or event, with variants, sizes and states.

Preview

Controls

Variant
Size
Shape
Disabled
Loading
Theme
Surface
Direction
Viewport

Device view renders in an isolated frame so real responsive breakpoints apply. Switch to Full for overflowing popovers.

Options

Visual options rendered from the current preview target.

Variant

Default
Secondary
Outline
Ghost
Link
Destructive

Size

Sm
Md
Lg
Icon
Icon sm
Icon lg

Shape

Default
Pill

Installation

terminal 
php artisan ui:add button

Registry contract

Install confidence

php artisan ui:add button writes only the generated targets below. The CLI validates each file hash before writing and prompts before replacing local changes unless --force is used.

Version
n/a
License
open
Stability
stable
Contract
v2
Foundation
≥ 1.0.0

Registry dependencies

None.

Package dependencies

None.

Guidance

API

manifest knowledge + registry-derived coverage

Props

Prop Type / values Default Description
variant default|secondary|outline|ghost|link|destructive default Visual treatment for the action.
size sm|md|lg|icon|icon-sm|icon-lg md Control height, padding, and text scale.
type button|submit|reset button Native button type when rendering a button element.
href string|null null Render as an anchor when present.
loading bool false Shows a spinner and disables interaction.
withArrow bool false Appends the animated trailing arrow.
shape default|pill default Documented catalog control used by the preview workbench.
disabled false|true false Documented catalog control used by the preview workbench.

Slots

  • default — Button label or inline content. Icon-only buttons should include an aria-label attribute.

Data slots

No data-slot selectors found in the registry source.

Capabilities

No capability flags declared.

Behavior

  • Uses server-rendered Blade and semantic HTML.
  • Renders a native button by default and an anchor when href is provided.
  • For disabled anchors, href is removed and aria-disabled/tabindex are applied.
  • Structural Blade component; behavior comes from semantic HTML, slots, and forwarded attributes.

Usage

resources/views/.../page.blade.php Blade 
<x-ui.button>{{ __('Button') }}</x-ui.button>

Variants

variants.blade.php Blade 
<div class="flex flex-wrap items-center gap-3">
    <x-ui.button variant="default">{{ __('Default') }}</x-ui.button>
    <x-ui.button variant="secondary">{{ __('Secondary') }}</x-ui.button>
    <x-ui.button variant="outline">{{ __('Outline') }}</x-ui.button>
    <x-ui.button variant="ghost">{{ __('Ghost') }}</x-ui.button>
    <x-ui.button variant="link">{{ __('Link') }}</x-ui.button>
    <x-ui.button variant="destructive">{{ __('Destructive') }}</x-ui.button>
    <x-ui.button :with-arrow="true">{{ __('With arrow') }}</x-ui.button>
</div>

Sizes

States

Accessibility

  • Renders a native <button> so keyboard and focus behavior is built in.
  • Disabled and loading states set the disabled attribute.
  • Icon-only buttons require an aria-label.
  • Focus-visible ring is always present for keyboard users.

Localization

Labels go through __() and the component is direction-agnostic — flip the preview to RTL to confirm layout mirrors correctly.

Source

The exact, editable file ui:add writes into your app — copy it or own the whole thing. Previews render this same code; there are no preview-only components.

Changelog

See the site changelog for the full release history.