Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Button

Displays a button or a component that looks like a button.

Installation

The Button component is part of Slate UI Kit and is available by default.

Usage
example.blade.php 
<x-slate::button>Button</x-slate::button>

Variants

Use the variant prop to change the visual style of the button.

example.blade.php 
<x-slate::button variant="default">Default</x-slate::button>
<x-slate::button variant="success">Success</x-slate::button>
<x-slate::button variant="warning">Warning</x-slate::button>
<x-slate::button variant="error">Error</x-slate::button>
<x-slate::button variant="danger">Danger</x-slate::button>
<x-slate::button variant="outline">Outline</x-slate::button>
<x-slate::button variant="secondary">Secondary</x-slate::button>
<x-slate::button variant="ghost">Ghost</x-slate::button>
<x-slate::button variant="link">Link</x-slate::button>

Sizes

Use the size prop to change the size of the button.

example.blade.php 
<x-slate::button size="sm">Small</x-slate::button>
<x-slate::button size="default">Default</x-slate::button>
<x-slate::button size="lg">Large</x-slate::button>

With Icons

Add icons to your buttons using the icon prop.

example.blade.php 
<x-slate::button icon="carbon-add">Add Item</x-slate::button>
<x-slate::button icon="carbon-checkmark" iconPosition="right">Save</x-slate::button>
<x-slate::button icon="carbon-settings"></x-slate::button>

Loading State

Use the loading prop to show a loading state.

example.blade.php 
<x-slate::button loading>Loading...</x-slate::button>
<x-slate::button loading loadingText="Saving...">Save</x-slate::button>

Disabled State

Disable a button by adding the disabled attribute.

example.blade.php 
<x-slate::button disabled>Disabled</x-slate::button>
<x-slate::button variant="outline" disabled>Disabled Outline</x-slate::button>

API Reference

Props
Prop Type Default Description
variant string "default" The visual style variant. Options: default, success, warning, error, danger, outline, secondary, ghost, link
size string "default" The size of the button. Options: sm, default, lg
color string null Override the default color. Options: primary, secondary, success, warning, info, error, danger
type string "button" The HTML button type. Options: button, submit, reset
loading boolean false Show loading state
loadingText string null Custom text to show when loading
showSpinner boolean true Show spinner when loading
icon string null Icon name (Carbon icon)
iconPosition string "left" Position of the icon. Options: left, right

Variants
  • default - Primary button style
  • success - Success state (green)
  • warning - Warning state (yellow/orange)
  • error - Error state (red)
  • danger - Danger/destructive state (darker red)
  • outline - Outlined button
  • secondary - Secondary button style
  • ghost - Ghost/transparent button
  • link - Link-style button

Sizes
  • sm - Small button (height: 36px)
  • default - Default button (height: 40px)
  • lg - Large button (height: 44px)

Accessibility

The Button component includes:

  • Proper ARIA attributes
  • Keyboard navigation support
  • Focus visible states
  • Disabled state handling
  • Input - Text input component
  • Card - Container component
Last updated .