Core Components

Action Button

Action buttons are essential UI elements that allow users to perform primary actions on a page, such as creating new resources, editing content, or triggering workflows.

Introduction

In Laravolt, Action Buttons are designed to provide consistent UI elements for primary actions across your application. They are typically placed in the header of pages and offer a standardized way to present actions to users.

Basic Usage

The most common use case is adding action buttons to page headers. You can do this by using the actions slot in the volt-app component:

HTML
<x-volt-app title="Posts">
  <x-slot name="actions">
    <x-volt-link-button
      url="{{ route('posts.create') }}"
      icon="plus"
      label="New Post"
    />
  </x-slot>
</x-volt-app>

This will render a "New Post" button with a plus icon in the header of your page, aligned to the right side.

Button Types

Laravolt provides several button types to accommodate different kinds of actions:

Used for navigation to other pages:

HTML
<x-volt-link-button
  url="{{ route('posts.create') }}"
  icon="plus"
  label="New Post"
/>

Submit Button

Used for form submissions:

HTML
<x-volt-submit-button icon="save" label="Save Post" />

Button

A general-purpose button that can be used for various actions:

HTML
<x-volt-button icon="refresh" label="Refresh Data" onclick="refreshData()" />

Button Properties

All button types support the following properties:

Icon

You can add icons to your buttons using Fomantic UI icon names:

HTML
<x-volt-link-button
  url="{{ route('posts.create') }}"
  icon="plus"
  label="New Post"
/>

Laravolt supports all icons from the Fomantic UI icon set.

Label

The text to display on the button:

HTML
<x-volt-link-button url="{{ route('posts.create') }}" label="New Post" />

You can also use the button without a label, displaying only the icon:

HTML
<x-volt-link-button url="{{ route('posts.create') }}" icon="plus" />

Color

You can change the color of the button using Fomantic UI color classes:

HTML
<x-volt-link-button
  url="{{ route('posts.create') }}"
  icon="plus"
  label="New Post"
  class="blue"
/>

Available color options include: primary, secondary, red, orange, yellow, olive, green, teal, blue, violet, purple, pink, brown, grey, and black.

Size

Control the size of the button:

HTML
<x-volt-link-button
  url="{{ route('posts.create') }}"
  icon="plus"
  label="New Post"
  class="tiny"
/>

Available size options include: mini, tiny, small, medium, large, big, huge, and massive.

Button Groups

You can group multiple buttons together for related actions:

HTML
<x-volt-app title="Posts">
  <x-slot name="actions">
    <div class="ui buttons">
      <x-volt-link-button
        url="{{ route('posts.create') }}"
        icon="plus"
        label="New Post"
      />
      <x-volt-link-button
        url="{{ route('posts.import') }}"
        icon="upload"
        label="Import"
      />
      <x-volt-link-button
        url="{{ route('posts.export') }}"
        icon="download"
        label="Export"
      />
    </div>
  </x-slot>
</x-volt-app>

For cases where you need to conserve space or group related actions, you can use a dropdown button:

HTML
<x-volt-dropdown-button label="Actions" icon="settings">
  <a href="{{ route('posts.create') }}" class="item">
    <i class="plus icon"></i> New Post
  </a>
  <a href="{{ route('posts.import') }}" class="item">
    <i class="upload icon"></i> Import
  </a>
  <a href="{{ route('posts.export') }}" class="item">
    <i class="download icon"></i> Export
  </a>
</x-volt-dropdown-button>

Confirmation Dialogs

For actions that need confirmation (like delete operations), you can add a confirmation dialog:

HTML
<x-volt-link-button
  url="{{ route('posts.destroy', $post) }}"
  icon="trash"
  label="Delete"
  class="red"
  data-confirm="Are you sure you want to delete this post?"
/>

The data-confirm attribute will trigger a confirmation dialog when the button is clicked, asking the user to confirm before proceeding with the action.

Disabled State

You can disable buttons when needed:

HTML
<x-volt-link-button
  url="{{ route('posts.create') }}"
  icon="plus"
  label="New Post"
  class="disabled"
/>

Responsive Considerations

On smaller screens, buttons with both icons and labels might take up too much space. You can use the mobile-text class to show only the icon on mobile devices:

HTML
<x-volt-link-button
  url="{{ route('posts.create') }}"
  icon="plus"
  label="New Post"
  class="mobile-text"
/>

Best Practices

  1. Consistent Placement: Always place primary actions in the page header using the actions slot.
  2. Clear Labels: Use clear, action-oriented labels for buttons (e.g., "Create Post" rather than "New").
  3. Meaningful Icons: Choose icons that clearly represent the action being performed.
  4. Color Coding: Use colors consistently across your application (e.g., red for destructive actions, green for confirming).
  5. Priority: Order buttons by their importance, with the most important action first.

Examples

Basic Page with Create Action

HTML
<x-volt-app title="Users">
  <x-slot name="actions">
    <x-volt-link-button
      url="{{ route('users.create') }}"
      icon="plus"
      label="Create User"
    />
  </x-slot>
  <!-- Page content here -->
</x-volt-app>

Resource Detail Page with Edit and Delete Actions

HTML
<x-volt-app title="User Details: {{ $user->name }}">
  <x-slot name="actions">
    <x-volt-link-button
      url="{{ route('users.edit', $user) }}"
      icon="edit"
      label="Edit"
    />
    <x-volt-link-button
      url="{{ route('users.destroy', $user) }}"
      icon="trash"
      label="Delete"
      class="red"
      data-confirm="Are you sure you want to delete this user? This action cannot be undone."
    />
  </x-slot>
  <!-- User details here -->
</x-volt-app>

Form Page with Submit and Cancel Actions

HTML
<x-volt-app title="Create New User">
  {!! form()->open()->route('users.store') !!}
  <!-- Form fields here -->
  <x-slot name="actions">
    <x-volt-submit-button icon="save" label="Save User" />
    <x-volt-link-button url="{{ route('users.index') }}" label="Cancel" />
  </x-slot>
  {!! form()->close() !!}
</x-volt-app>
Previous
Menu
Next
Flash Messages