-
Notifications
You must be signed in to change notification settings - Fork 80
Buttons
Modestas Vaitkevičius edited this page May 26, 2025
·
4 revisions
The AdminDash starter kit provides a comprehensive set of button components with various styles, sizes, states, and interactive features. All buttons support dark mode and include accessibility features.
- Basic Usage
- Button Variants
- Button Sizes
- Button States
- Icon Buttons
- Button Groups
- Social Buttons
- Props & Configuration
- Examples
<x-button>Click Me</x-button><x-button variant="primary">Primary Button</x-button>
<x-button variant="secondary">Secondary Button</x-button>
<x-button variant="success">Success Button</x-button>{{-- resources/views/components/button.blade.php --}}
@props([
'variant' => 'primary',
'size' => 'default',
'disabled' => false,
'loading' => false,
'type' => 'button'
])
@php
$baseClasses = 'inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed';
$variantClasses = [
'primary' => 'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500',
'secondary' => 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 focus:ring-gray-500',
'success' => 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500',
'danger' => 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500',
'warning' => 'bg-yellow-500 hover:bg-yellow-600 text-white focus:ring-yellow-500',
'info' => 'bg-indigo-600 hover:bg-indigo-700 text-white focus:ring-indigo-500',
];
$sizeClasses = [
'xs' => 'px-2.5 py-1.5 text-xs',
'sm' => 'px-3 py-1.5 text-sm',
'default' => 'px-4 py-2 text-base',
'lg' => 'px-5 py-2.5 text-lg',
'xl' => 'px-6 py-3 text-xl',
];
$classes = $baseClasses . ' ' . $variantClasses[$variant] . ' ' . $sizeClasses[$size];
@endphp
<button
{{ $attributes->merge(['type' => $type, 'class' => $classes]) }}
@if($disabled) disabled @endif
>
@if($loading)
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@endif
{{ $slot }}
</button>{{-- resources/views/components/button-outline.blade.php --}}
@props([
'variant' => 'primary',
'size' => 'default',
'disabled' => false,
'type' => 'button'
])
@php
$baseClasses = 'inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors border disabled:opacity-50 disabled:cursor-not-allowed';
$variantClasses = [
'primary' => 'border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 dark:text-blue-400 dark:border-blue-400 focus:ring-blue-500',
'secondary' => 'border-gray-600 text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:text-gray-400 dark:border-gray-400 focus:ring-gray-500',
'success' => 'border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 dark:text-green-400 dark:border-green-400 focus:ring-green-500',
'danger' => 'border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-400 focus:ring-red-500',
'warning' => 'border-yellow-500 text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-400 focus:ring-yellow-500',
'info' => 'border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 dark:text-indigo-400 dark:border-indigo-400 focus:ring-indigo-500',
];
$sizeClasses = [
'xs' => 'px-2.5 py-1.5 text-xs',
'sm' => 'px-3 py-1.5 text-sm',
'default' => 'px-4 py-2 text-base',
'lg' => 'px-5 py-2.5 text-lg',
'xl' => 'px-6 py-3 text-xl',
];
$classes = $baseClasses . ' ' . $variantClasses[$variant] . ' ' . $sizeClasses[$size];
@endphp
<button
{{ $attributes->merge(['type' => $type, 'class' => $classes]) }}
@if($disabled) disabled @endif
>
{{ $slot }}
</button><!-- Extra Small -->
<x-button size="xs">Extra Small</x-button>
<!-- Small -->
<x-button size="sm">Small</x-button>
<!-- Default -->
<x-button>Default</x-button>
<!-- Large -->
<x-button size="lg">Large</x-button>
<!-- Extra Large -->
<x-button size="xl">Extra Large</x-button>{{-- resources/views/components/button-loading.blade.php --}}
@props([
'loading' => false,
'loadingText' => 'Loading...',
'variant' => 'primary'
])
<x-button :variant="$variant" :loading="$loading" {{ $attributes }}>
@if($loading)
{{ $loadingText }}
@else
{{ $slot }}
@endif
</x-button><x-button-loading
:loading="$isSubmitting"
loading-text="Saving..."
wire:click="save"
variant="primary"
>
Save Changes
</x-button-loading>{{-- resources/views/components/icon-button.blade.php --}}
@props([
'icon' => null,
'iconPosition' => 'left',
'variant' => 'primary',
'size' => 'default',
'rounded' => false
])
@php
$roundedClass = $rounded ? 'rounded-full p-2' : 'rounded-md';
$baseClasses = "inline-flex items-center justify-center font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors $roundedClass";
$variantClasses = [
'primary' => 'bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500',
'secondary' => 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 focus:ring-gray-500',
'success' => 'bg-green-600 hover:bg-green-700 text-white focus:ring-green-500',
'danger' => 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500',
];
$sizeClasses = [
'sm' => $rounded ? 'p-1.5' : 'px-2.5 py-1.5 text-sm',
'default' => $rounded ? 'p-2' : 'px-4 py-2',
'lg' => $rounded ? 'p-3' : 'px-5 py-2.5 text-lg',
];
$iconSizeClasses = [
'sm' => 'h-4 w-4',
'default' => 'h-5 w-5',
'lg' => 'h-6 w-6',
];
$classes = $baseClasses . ' ' . $variantClasses[$variant] . ' ' . $sizeClasses[$size];
$iconSize = $iconSizeClasses[$size];
@endphp
<button {{ $attributes->merge(['class' => $classes]) }}>
@if($icon && $iconPosition === 'left')
@include("icons.{$icon}", ['class' => $iconSize . ($slot->isEmpty() ? '' : ' mr-2')])
@endif
{{ $slot }}
@if($icon && $iconPosition === 'right')
@include("icons.{$icon}", ['class' => $iconSize . ($slot->isEmpty() ? '' : ' ml-2')])
@endif
</button><!-- Icon only buttons -->
<x-icon-button icon="plus" variant="primary" rounded />
<x-icon-button icon="x" variant="secondary" rounded />
<x-icon-button icon="check" variant="success" rounded />
<x-icon-button icon="trash" variant="danger" rounded />
<!-- Buttons with icons and text -->
<x-icon-button icon="plus" variant="primary">Add Item</x-icon-button>
<x-icon-button icon="save" variant="success">Save</x-icon-button>
<x-icon-button icon="trash" variant="danger" icon-position="right">Delete</x-icon-button>{{-- resources/views/components/button-group.blade.php --}}
@props(['vertical' => false])
@php
$classes = $vertical
? 'inline-flex flex-col rounded-md shadow-sm'
: 'inline-flex rounded-md shadow-sm';
@endphp
<div {{ $attributes->merge(['class' => $classes, 'role' => 'group']) }}>
{{ $slot }}
</div>{{-- resources/views/components/button-group-item.blade.php --}}
@props([
'first' => false,
'last' => false,
'active' => false,
'variant' => 'secondary'
])
@php
$baseClasses = 'relative inline-flex items-center px-4 py-2 text-sm font-medium focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500';
$positionClasses = match(true) {
$first => 'rounded-l-lg border',
$last => 'rounded-r-lg border-t border-r border-b',
default => 'border-t border-b border-r'
};
$variantClasses = $active
? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 border-blue-500'
: 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600';
$classes = $baseClasses . ' ' . $positionClasses . ' ' . $variantClasses;
@endphp
<button {{ $attributes->merge(['class' => $classes]) }}>
{{ $slot }}
</button><!-- Horizontal Button Group -->
<x-button-group>
<x-button-group-item first active>Day</x-button-group-item>
<x-button-group-item>Week</x-button-group-item>
<x-button-group-item last>Month</x-button-group-item>
</x-button-group>
<!-- Icon Button Group -->
<x-button-group>
<x-button-group-item first>
<x-icon name="list" class="h-5 w-5" />
</x-button-group-item>
<x-button-group-item>
<x-icon name="grid" class="h-5 w-5" />
</x-button-group-item>
<x-button-group-item last>
<x-icon name="table" class="h-5 w-5" />
</x-button-group-item>
</x-button-group>{{-- resources/views/components/social-button.blade.php --}}
@props([
'provider' => 'google',
'size' => 'default'
])
@php
$baseClasses = 'inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors';
$providerClasses = [
'facebook' => 'bg-[#1877F2] hover:bg-[#166FE5] text-white focus:ring-[#1877F2]',
'twitter' => 'bg-[#1DA1F2] hover:bg-[#1A91DA] text-white focus:ring-[#1DA1F2]',
'google' => 'bg-[#EA4335] hover:bg-[#D73925] text-white focus:ring-[#EA4335]',
'github' => 'bg-[#333333] hover:bg-[#2B2B2B] text-white focus:ring-[#333333]',
];
$sizeClasses = [
'sm' => 'px-3 py-1.5 text-sm',
'default' => 'px-4 py-2',
'lg' => 'px-6 py-3 text-lg',
];
$classes = $baseClasses . ' ' . $providerClasses[$provider] . ' ' . $sizeClasses[$size];
@endphp
<button {{ $attributes->merge(['class' => $classes]) }}>
@include("icons.{$provider}", ['class' => 'w-5 h-5 mr-2'])
{{ $slot ?: ucfirst($provider) }}
</button><x-social-button provider="facebook">Sign in with Facebook</x-social-button>
<x-social-button provider="google">Sign in with Google</x-social-button>
<x-social-button provider="github">Sign in with GitHub</x-social-button>
<x-social-button provider="twitter">Sign in with Twitter</x-social-button>| Prop | Type | Default | Description |
|---|---|---|---|
variant |
String | 'primary' | Button style (primary, secondary, success, danger, warning, info) |
size |
String | 'default' | Button size (xs, sm, default, lg, xl) |
disabled |
Boolean | false | Disable the button |
loading |
Boolean | false | Show loading state |
type |
String | 'button' | HTML button type |
| Prop | Type | Default | Description |
|---|---|---|---|
icon |
String | null | Icon name to display |
iconPosition |
String | 'left' | Icon position (left, right) |
rounded |
Boolean | false | Make button fully rounded |
| Prop | Type | Default | Description |
|---|---|---|---|
provider |
String | 'google' | Social provider (facebook, twitter, google, github) |
{{-- resources/views/components/form-buttons.blade.php --}}
<div class="flex justify-end space-x-3">
<x-button variant="secondary" type="button" onclick="window.history.back()">
Cancel
</x-button>
<x-button variant="secondary" type="button">
Save as Draft
</x-button>
<x-button-loading
:loading="$isSubmitting"
loading-text="Creating..."
type="submit"
variant="primary"
>
Create Product
</x-button-loading>
</div>{{-- Table row actions --}}
<div class="flex justify-end space-x-2">
<x-icon-button
icon="eye"
variant="primary"
rounded
size="sm"
onclick="viewRecord({{ $record->id }})"
title="View"
/>
<x-icon-button
icon="edit"
variant="secondary"
rounded
size="sm"
onclick="editRecord({{ $record->id }})"
title="Edit"
/>
<x-icon-button
icon="trash"
variant="danger"
rounded
size="sm"
onclick="deleteRecord({{ $record->id }})"
title="Delete"
/>
</div>{{-- Modal footer buttons --}}
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<x-button
variant="primary"
class="w-full sm:ml-3 sm:w-auto"
onclick="confirmAction()"
>
Confirm
</x-button>
<x-button
variant="secondary"
class="mt-3 w-full sm:mt-0 sm:w-auto"
onclick="closeModal()"
>
Cancel
</x-button>
</div>{{-- Different loading button examples --}}
<div class="space-y-4">
<x-button-loading
:loading="$saving"
loading-text="Saving..."
wire:click="save"
>
Save Changes
</x-button-loading>
<x-button-loading
:loading="$deleting"
loading-text="Deleting..."
variant="danger"
wire:click="delete"
>
Delete Item
</x-button-loading>
<x-button-loading
:loading="$submitting"
loading-text="Processing..."
variant="success"
size="lg"
wire:click="submit"
>
Submit Form
</x-button-loading>
</div><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Product - AdminDash</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
colors: {
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))',
},
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer base {
:root {
--sidebar-background: 210 20% 98%;
--sidebar-foreground: 215 25% 27%;
--sidebar-accent: 217 33% 17%;
--sidebar-accent-foreground: 210 40% 98%;
--sidebar-border: 214 32% 91%;
--sidebar-ring: 221 83% 53%;
}
.dark {
--sidebar-background: 217 33% 17%;
--sidebar-foreground: 210 40% 98%;
--sidebar-accent: 210 40% 96%;
--sidebar-accent-foreground: 217 33% 17%;
--sidebar-border: 215 25% 27%;
--sidebar-ring: 221 83% 65%;
}
}
/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background-color: rgba(156, 163, 175, 0.5);
border-radius: 3px;
}
/* Sidebar width transitions */
.sidebar-transition {
transition: width 0.3s ease, transform 0.3s ease, margin-left 0.3s ease;
}
.content-transition {
transition: margin-left 0.3s ease, width 0.3s ease;
}
/* Custom file input */
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select files';
display: inline-block;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
padding: 0.375rem 0.75rem;
outline: none;
white-space: nowrap;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.dark .custom-file-input::before {
background: #374151;
border-color: #4b5563;
color: #e5e7eb;
}
.custom-file-input:hover::before {
border-color: #9ca3af;
}
.custom-file-input:active::before {
background: #e5e7eb;
}
.dark .custom-file-input:active::before {
background: #4b5563;
}
</style>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 antialiased" x-data="{
sidebarOpen: window.innerWidth >= 1024,
darkMode: localStorage.getItem('darkMode') === 'true',
toggleSidebar() { this.sidebarOpen = !this.sidebarOpen },
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
formSubmitted: false,
formData: {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
},
errors: {},
validateForm() {
this.errors = {};
if (!this.formData.name) this.errors.name = 'Product name is required';
if (!this.formData.category) this.errors.category = 'Category is required';
if (!this.formData.price) this.errors.price = 'Price is required';
else if (isNaN(this.formData.price) || this.formData.price <= 0) this.errors.price = 'Price must be a positive number';
if (!this.formData.stock) this.errors.stock = 'Stock quantity is required';
else if (isNaN(this.formData.stock) || parseInt(this.formData.stock) < 0) this.errors.stock = 'Stock must be a non-negative number';
if (!this.formData.description) this.errors.description = 'Description is required';
return Object.keys(this.errors).length === 0;
},
submitForm() {
if (this.validateForm()) {
// In a real application, you would submit the form data to the server here
console.log('Form data:', this.formData);
this.formSubmitted = true;
// Reset form after 3 seconds for demo purposes
setTimeout(() => {
this.formSubmitted = false;
this.formData = {
name: '',
category: '',
price: '',
stock: '',
description: '',
status: 'active',
features: [],
releaseDate: '',
images: '',
tags: '',
weight: '',
dimensions: {
length: '',
width: '',
height: ''
}
};
}, 3000);
}
}
}" :class="{ 'dark': darkMode }">
<!-- Main Container -->
<div class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-white dark:bg-gray-800 shadow-sm z-20 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between h-16 px-4">
<!-- Left side: Logo and toggle -->
<div class="flex items-center">
<button @click="toggleSidebar"
class="p-2 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
<div class="ml-4 font-semibold text-xl text-blue-600 dark:text-blue-400">AdminDash</div>
</div>
<!-- Right side: Search, notifications, profile -->
<div class="flex items-center space-x-4">
<!-- Search -->
<div class="relative hidden md:block">
<input type="text" placeholder="Search..."
class="w-64 pl-10 pr-4 py-2 rounded-lg text-sm bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
<div class="absolute left-3 top-2.5 text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>
</div>
<!-- Dark mode toggle -->
<button @click="toggleDarkMode"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<svg x-show="!darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
<svg x-show="darkMode" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</button>
<!-- Notifications -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="p-2 rounded-full text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 focus:outline-none">
<div class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<div class="px-4 py-2 border-b border-gray-200 dark:border-gray-700">
<p class="text-sm font-medium">Notifications</p>
</div>
<div class="max-h-60 overflow-y-auto custom-scrollbar">
<a href="#"
class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">System Update</p>
<p class="text-xs text-gray-500 dark:text-gray-400">The system will be updated
tonight at 2 AM</p>
<p class="text-xs text-gray-400 mt-1">2 hours ago</p>
</a>
<a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">
<p class="text-sm font-medium text-gray-800 dark:text-gray-200">New User Registered
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Jane Doe has registered</p>
<p class="text-xs text-gray-400 mt-1">5 hours ago</p>
</a>
</div>
<div class="px-4 py-2 border-t border-gray-200 dark:border-gray-700">
<a href="#"
class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300">View
all notifications</a>
</div>
</div>
</div>
<!-- Profile -->
<div x-data="{ open: false }" class="relative">
<button @click="open = !open" class="flex items-center focus:outline-none">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<span class="ml-2 hidden md:block">John Doe</span>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div x-show="open" @click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50 border border-gray-200 dark:border-gray-700">
<a href="profile.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
Profile
</div>
</a>
<a href="#"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
Settings
</div>
</a>
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<a href="login.html"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</div>
</a>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content Area -->
<div class="flex flex-1 overflow-hidden">
<!-- Sidebar -->
<aside :class="{ 'w-64': sidebarOpen, 'w-0 md:w-16': !sidebarOpen }"
class="bg-sidebar text-sidebar-foreground border-r border-gray-200 dark:border-gray-700 sidebar-transition overflow-hidden">
<!-- Sidebar Content -->
<div class="h-full flex flex-col">
<!-- Sidebar Header -->
<div class="p-4 flex items-center justify-between">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z"
clip-rule="evenodd" />
</svg>
<span class="ml-2 font-semibold text-lg transition-opacity duration-300"
:class="{ 'opacity-0': !sidebarOpen }">AdminDash</span>
</div>
</div>
<!-- Sidebar Menu -->
<nav class="flex-1 overflow-y-auto custom-scrollbar py-4">
<ul class="space-y-1 px-2">
<!-- Dashboard -->
<li>
<a href="index.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Dashboard</span>
</a>
</li>
<!-- Products -->
<li x-data="{ open: true }">
<button @click="open = !open"
class="flex items-center justify-between w-full px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground font-medium">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Products</span>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 transition-transform"
:class="{ 'rotate-90': open, 'opacity-0': !sidebarOpen }" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
</button>
<!-- Level 2 submenu -->
<div x-show="open && sidebarOpen" class="mt-1 ml-4 space-y-1">
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<span>All Products</span>
</div>
</a>
<a href="create-product.html"
class="block px-3 py-2 text-sm rounded-md bg-sidebar-accent text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span>Create Product</span>
</div>
</a>
<a href="#"
class="block px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
</svg>
<span>Categories</span>
</div>
</a>
</div>
</li>
<!-- Profile -->
<li>
<a href="profile.html"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Profile</span>
</a>
</li>
<!-- Settings -->
<li>
<a href="#"
class="flex items-center px-3 py-2 text-sm rounded-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<span :class="{ 'opacity-0': !sidebarOpen }"
class="transition-opacity duration-300">Settings</span>
</a>
</li>
</ul>
</nav>
<!-- Sidebar Footer -->
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center" x-show="sidebarOpen">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User"
class="h-8 w-8 rounded-full">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Administrator</p>
</div>
</div>
</div>
</div>
</aside>
<!-- Main Content -->
<main :class="{ 'ml-0 md:ml-16': !sidebarOpen, 'ml-0 md:ml-64': sidebarOpen }"
class="flex-1 overflow-auto bg-gray-100 dark:bg-gray-900 content-transition">
<div class="p-6">
<!-- Success Message -->
<div x-show="formSubmitted" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform -translate-y-2"
x-transition:enter-end="opacity-100 transform translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 transform translate-y-0"
x-transition:leave-end="opacity-0 transform -translate-y-2"
class="mb-6 bg-green-50 dark:bg-green-900 border-l-4 border-green-500 p-4 rounded-md">
<div class="flex items-center">
<div class="flex-shrink-0">
<svg class="h-5 w-5 text-green-500 dark:text-green-400"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd" />
</svg>
</div>
<div class="ml-3">
<p class="text-sm text-green-700 dark:text-green-200">Product created successfully!</p>
</div>
<div class="ml-auto pl-3">
<div class="-mx-1.5 -my-1.5">
<button @click="formSubmitted = false"
class="inline-flex rounded-md p-1.5 text-green-500 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<span class="sr-only">Dismiss</span>
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>
<div class="p-6">
<!-- Breadcrumbs -->
<div class="mb-6 flex items-center text-sm">
<a href="index.html" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mx-2 text-gray-400" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 5l7 7-7 7" />
</svg>
<span class="text-gray-500 dark:text-gray-400">Buttons</span>
</div>
<!-- Page Title -->
<div class="mb-6">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Buttons</h1>
<p class="text-gray-600 dark:text-gray-400 mt-1">Various button styles and components for
your application</p>
</div>
<!-- Basic Buttons -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Basic Buttons</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Primary
</button>
<button
class="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
Secondary
</button>
<button
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
Success
</button>
<button
class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
Danger
</button>
<button
class="px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-colors">
Warning
</button>
<button
class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors">
Info
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Basic button styles with different colors for different actions.</p>
</div>
</div>
</div>
<!-- Outline Buttons -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Outline Buttons</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="px-4 py-2 border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 dark:text-blue-400 dark:border-blue-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Primary
</button>
<button
class="px-4 py-2 border border-gray-600 text-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700/50 dark:text-gray-400 dark:border-gray-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
Secondary
</button>
<button
class="px-4 py-2 border border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 dark:text-green-400 dark:border-green-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
Success
</button>
<button
class="px-4 py-2 border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
Danger
</button>
<button
class="px-4 py-2 border border-yellow-500 text-yellow-500 hover:bg-yellow-50 dark:hover:bg-yellow-900/20 dark:text-yellow-400 dark:border-yellow-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2 transition-colors">
Warning
</button>
<button
class="px-4 py-2 border border-indigo-600 text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 dark:text-indigo-400 dark:border-indigo-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors">
Info
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Outline button styles with border and transparent background.</p>
</div>
</div>
</div>
<!-- Button Sizes -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Button Sizes</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap items-center gap-4">
<button
class="px-2.5 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs font-medium rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Extra Small
</button>
<button
class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Small
</button>
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Default
</button>
<button
class="px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white text-lg font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Large
</button>
<button
class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white text-xl font-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Extra Large
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Different button sizes for various contexts.</p>
</div>
</div>
</div>
<!-- Icon Buttons -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Icon Buttons</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="p-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
<button
class="p-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<button
class="p-2 bg-green-600 hover:bg-green-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13l4 4L19 7" />
</svg>
</button>
<button
class="p-2 bg-red-600 hover:bg-red-700 text-white rounded-full focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
<button
class="p-2 border border-blue-600 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 dark:text-blue-400 dark:border-blue-400 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
</button>
</div>
<div class="flex flex-wrap gap-4 mt-4">
<button
class="flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
Add Item
</button>
<button
class="flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
Save
</button>
<button
class="flex items-center px-4 py-2 border border-red-600 text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20 dark:text-red-400 dark:border-red-400 font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Delete
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Icon-only buttons and buttons with icons and text.</p>
</div>
</div>
</div>
<!-- Button States -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Button States</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
Normal
</button>
<button
class="px-4 py-2 bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors cursor-default">
Hover/Active
</button>
<button
class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md focus:outline-none ring-2 ring-blue-500 ring-offset-2 transition-colors">
Focused
</button>
<button
class="px-4 py-2 bg-blue-400 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors opacity-50 cursor-not-allowed"
disabled>
Disabled
</button>
</div>
<div class="flex flex-wrap gap-4 mt-4">
<button
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors flex items-center">
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
stroke-width="4">
</circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
Loading...
</button>
<button
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 13l4 4L19 7" />
</svg>
Completed
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Different button states: normal, hover/active, focused, disabled, and loading.
</p>
</div>
</div>
</div>
<!-- Button Groups -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Button Groups</h3>
</div>
<div class="p-6 space-y-6">
<div class="inline-flex rounded-md shadow-sm" role="group">
<button
class="px-4 py-2 text-sm font-medium text-blue-700 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
Day
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
Week
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
Month
</button>
</div>
<div class="inline-flex rounded-md shadow-sm mt-4" role="group">
<button
class="p-2 text-gray-900 bg-white border border-gray-200 rounded-l-lg hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h7" />
</svg>
</button>
<button
class="p-2 text-gray-900 bg-white border-t border-b border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16" />
</svg>
</button>
<button
class="p-2 text-gray-900 bg-white border border-gray-200 rounded-r-md hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Button groups for related actions or toggling between options.</p>
</div>
</div>
</div>
<!-- Social Buttons -->
<div
class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Social Buttons</h3>
</div>
<div class="p-6 space-y-6">
<div class="flex flex-wrap gap-4">
<button
class="flex items-center px-4 py-2 bg-[#1877F2] hover:bg-[#166FE5] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#1877F2] focus:ring-offset-2 transition-colors">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
<path fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd"></path>
</svg>
Facebook
</button>
<button
class="flex items-center px-4 py-2 bg-[#1DA1F2] hover:bg-[#1A91DA] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#1DA1F2] focus:ring-offset-2 transition-colors">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
<path
d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84">
</path>
</svg>
Twitter
</button>
<button
class="flex items-center px-4 py-2 bg-[#EA4335] hover:bg-[#D73925] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#EA4335] focus:ring-offset-2 transition-colors">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
<path
d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z">
</path>
</svg>
Google
</button>
<button
class="flex items-center px-4 py-2 bg-[#333333] hover:bg-[#2B2B2B] text-white font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-[#333333] focus:ring-offset-2 transition-colors">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"
aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd"></path>
</svg>
GitHub
</button>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400 pt-2">
<p>Social media buttons for authentication or sharing.</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="mt-auto py-4 text-center text-sm text-gray-500 dark:text-gray-400">
© 2023 AdminDash. All rights reserved.
</footer>
</div>
</main>
</div>
</div>
</body>
</html>