stacktrace/ui

Appearance

Button ​

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

Component Source UI Reference

Installation ​

shell
php artisan ui:add button

Usage ​

vue
<template>
  <Button>Button</Button>
</template>

<script setup lang="ts">
import { Button } from '@/Components/Button'
</script>

Examples ​

Primary ​

Secondary ​

Destructive ​

Outline ​

Ghost ​

Icon ​

As Child ​

Action Button ​

You may use <ActionButton /> to display processing state or icon more easily. The <ActionButton /> inherits all functionality from a <Button /> component.

Processing ​

Label and Icon ​

Processing, Label, Icon and Recently Successful ​

You may use processing, icon, label and recently-successful to display a button for submitting an Inertia form.

vue
<template>
  <form @submit.prevent="form.post('/')">
    <ActionButton
      label="Save"
      :icon="SaveIcon"
      :processing="form.processing"
      :recently-successful="form.recentlySuccessful"
      type="submit"
    />
  </form>
</template>

<script setup lang="ts">
import { ActionButton } from '@/Components/Button'
import { SaveIcon } from 'lucide-vue-next'
import { useForm } from '@inertiajs/vue3'
  
const form = useForm({})
</script>