@extends('admin.layouts.app') @section('title', 'Design System') @section('page-title', 'Design System Components') @section('content')
Buttons Forms Data Tables Feedback Navigation File Upload Layout Modals

Button Variants

Primary Button Secondary Button Outline Button Ghost Button Danger Button

Usage:

<x-button variant="primary">Primary Button</x-button>
<x-button variant="secondary">Secondary Button</x-button>
<x-button variant="outline">Outline Button</x-button>

Button Sizes

Small Medium (Default) Large

Usage:

<x-button size="sm">Small</x-button>
<x-button>Medium</x-button>
<x-button size="lg">Large</x-button>
<x-button size="icon" icon="heart"></x-button>

Buttons with Icons

Add New Download Settings Delete Next

Usage:

<x-button icon="plus">Add New</x-button>
<x-button icon="arrow-right" iconPosition="right">Next</x-button>

Button States

Loading... Disabled Link Button

Usage:

<x-button :loading="true">Loading...</x-button>
<x-button :disabled="true">Disabled</x-button>
<x-button href="#">Link Button</x-button>

Text Inputs

Usage:

<x-input label="Email" type="email" icon="mail" :required="true" />
<x-input label="Phone" type="tel" placeholder="+1 (555) 000-0000" />
<x-input label="Error Field" error="This field is required" />

Select Dropdown

Usage:

<x-select label="Country" placeholder="Select country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</x-select>

Textarea

Usage:

<x-textarea label="Description" :rows="4" hint="Max 500 chars" />

Search Input

Usage:

<x-search-input placeholder="Search anything..." />

Toggle Switches

Basic Usage

Different Sizes

Color Variants

Simple Toggles

Usage:

<x-toggle name="notifications" label="Enable notifications" />
<x-toggle name="auto_save" :checked="true" size="lg" />
<x-toggle name="premium" variant="success" :disabled="true" />
<x-toggle name="simple" /> <!-- Without label -->

Data Table

John Doe john@example.com Active View Edit Delete Jane Smith jane@example.com Pending View Edit Delete

Usage:

<x-data-table :headers="['name' => 'Name', 'email' => 'Email']">
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
  </tr>
</x-data-table>

Badges

Primary Secondary Active Pending Inactive Info

Usage:

<x-badge variant="success" icon="check">Active</x-badge>
<x-badge variant="warning">Pending</x-badge>
<x-badge variant="danger" icon="x">Inactive</x-badge>

Action Dropdown

View Edit Duplicate Delete

Usage:

<x-action-dropdown>
  <x-action-item icon="eye" href="#">View</x-action-item>
  <x-action-item icon="edit-3">Edit</x-action-item>
  <x-action-item icon="trash-2" variant="danger">Delete</x-action-item>
</x-action-dropdown>

Filter Dropdown

Usage:

<x-filter-dropdown label="Status" :options="['active' => 'Active']" />
<x-filter-dropdown label="Type" :multiple="true" :options="[...]" />

Empty State

Usage:

<x-empty-state
  icon="inbox"
  title="No data found"
  description="Get started by creating a new item"
  actionText="Add New Item"
  actionUrl="#" />

Toast Notifications

Success Toast Error Toast Warning Toast Info Toast

Usage (JavaScript):

toast.success('Message', 'Title');
toast.error('Message', 'Title');
toast.warning('Message', 'Title');
toast.info('Message', 'Title');

Alert Boxes

Data has been saved successfully Please review the entered data An error occurred while processing System maintenance scheduled for tonight

Usage:

<x-alert variant="success" title="Success!" :dismissible="true">
  Data has been saved successfully
</x-alert>

Loading States

Usage:

<x-loading size="sm" text="Loading..." />
<x-loading size="md" text="Processing..." />
<x-loading size="lg" text="Please wait..." />

Tabs Component

Overview Settings Users

Overview content goes here...

Settings content goes here...

Users content goes here...

Usage:

<x-tabs defaultTab="tab1">
  <x-tab-button tab="tab1" icon="home">Overview</x-tab-button>
  <x-tab-content tab="tab1">Content here</x-tab-content>
</x-tabs>

Pagination

{{-- Mock pagination for demo --}}
Showing 1 to 10 of 100 results

Usage:

<x-pagination :paginator="$items" />
<x-pagination :paginator="$items" :simple="true" />

File Upload

Usage:

<x-file-upload
  label="Upload Files"
  name="files"
  accept="image/*,.pdf"
  :multiple="true"
  maxSize="10MB"
  :preview="true" />

Cards

Basic Card

This is a basic card with some content inside.

Card content goes here with a nice header section.

 Edit

This card has action buttons in the header.

Usage:

<div class="card">Content</div>
<x-card title="Title" subtitle="Subtitle" icon="star">Content</x-card>
<x-card title="With Actions">
  <x-slot name="actions">...</x-slot>
  Content
</x-card>

Statistics Cards

Usage:

<x-stat-card
  title="Total Users"
  value="2,543"
  icon="users"
  gradient="primary"
  trend="vs last month"
  trendDirection="up"
  trendValue="12%" />

Activity Items

Usage:

<x-activity-item
  icon="user-plus"
  iconColor="primary"
  title="New user registered"
  description="John Doe joined"
  time="5 minutes ago" />

Enhanced Table Component

John Doe john@example.com Active View Jane Smith jane@example.com Pending View

Usage:

<x-enhanced-table
  :headers="[
    'name' => ['text' => 'Name', 'sortable' => true],
    'email' => ['text' => 'Email', 'width' => '250px'],
    'status' => ['text' => 'Status', 'align' => 'center']
  ]"
  :responsive="true"
  :striped="true">
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td><x-badge variant="success">Active</x-badge></td>
  </tr>
</x-enhanced-table>

Sidebar Navigation Items

Usage:

<x-sidebar-item
  href="#"
  icon="home"
  label="Dashboard"
  :active="true" />

<x-sidebar-item
  href="#"
  icon="users"
  label="Users"
  badge="5" />

Modal Dialog

Open Modal

Modal Title

This is a modal dialog. It can contain any content you want.

Cancel Confirm

Usage:

<x-button @click="$dispatch('open-modal', 'my-modal')">Open</x-button>

<x-modal name="my-modal" maxWidth="md">
  <div class="p-6">
    <h3>Modal Title</h3>
    <p>Content here</p>
  </div>
</x-modal>

Confirmation Modal

Delete Item

Usage:

<x-button @click="$dispatch('open-modal', 'confirm-delete')">Delete</x-button>

<x-confirm-modal
  name="confirm-delete"
  title="Delete this item?"
  message="This action cannot be undone"
  confirmText="Yes, Delete"
  confirmVariant="danger"
  icon="trash-2" />

Modal Sizes

Small Medium Large Extra Large

Small Modal

This is a small modal (max-w-sm)

Medium Modal

This is a medium modal (max-w-md)

Large Modal

This is a large modal (max-w-lg)

Extra Large Modal

This is an extra large modal (max-w-xl)

Available Sizes:

maxWidth="sm" → max-w-sm (384px)
maxWidth="md" → max-w-md (448px)
maxWidth="lg" → max-w-lg (512px)
maxWidth="xl" → max-w-xl (576px)
maxWidth="2xl" → max-w-2xl (672px)
maxWidth="3xl" → max-w-3xl (768px)
@endsection