Prev
5
Next

Day 5 - Component Challenge

Challenge UI with Livewire & Alpine.js

Source

Day 5

Day 5

Tabs & Badge Components

Organize content with accessible tabs and display status with versatile badges

Badge

Status indicators with variants and sizes

Badge Variants

Default Primary Secondary Success Warning Error Info Outline

Badge Sizes

Small Medium Large

With Icons

Completed Pending Failed New Featured

Pill Shape

Active Paused Blocked Premium

Removable Tags

Laravel Livewire Alpine.js Tailwind CSS

Click the X to remove

Real-world Examples

Order #CM-2025-001 Delivered
Payment from Yaoundé Pending
Server Status Online

Features

8 color variants
3 size options
Icon support
Pill shape
Removable option
Dark mode ready

Tabs

Organize content with accessible navigation

Underline Style (Default)

Account Settings

Manage your account details, profile information, and preferences from Douala, Cameroon.

General Settings

Configure application settings, language (French/English), and display preferences.

Notification Preferences

Control how you receive updates via email, SMS, or push notifications.

Pills Style

Overview Dashboard

View key metrics and insights for your business in Yaoundé.

Analytics Data

Detailed analytics and performance metrics for data-driven decisions.

Generated Reports

Access and download your business reports and summaries.

Enclosed Style

<x-ui.badge variant="success">Active</x-ui.badge>
Active

Documentation for the badge component with usage examples.

Features

Alpine.js state
Keyboard navigation
3 style variants
Icon support
ARIA compliant
Smooth transitions

Usage Examples

Badge Usage

{{-- Basic Badge --}}
<x-ui.badge variant="success">Active</x-ui.badge>
<x-ui.badge variant="warning">Pending</x-ui.badge>
<x-ui.badge variant="error">Failed</x-ui.badge>
 
{{-- With Icon --}}
<x-ui.badge variant="success" icon="check-circle">
    Completed
</x-ui.badge>
 
{{-- Different Sizes --}}
<x-ui.badge variant="primary" size="sm">Small</x-ui.badge>
<x-ui.badge variant="primary" size="md">Medium</x-ui.badge>
<x-ui.badge variant="primary" size="lg">Large</x-ui.badge>
 
{{-- Pill Shape --}}
<x-ui.badge variant="info" icon="zap" :pill="true">
    Premium
</x-ui.badge>
 
{{-- Removable Tags --}}
<x-ui.badge variant="primary" :removable="true">
    Laravel
</x-ui.badge>

Props

  • variant - Color variant: default, primary, secondary, success, warning, error, info, outline
  • size - Size: sm, md (default), lg
  • icon - Lucide icon name
  • pill - Boolean for rounded-full shape
  • removable - Boolean to show X button

Tabs Usage

{{-- Basic Tabs --}}
<x-ui.tabs default="account">
    <x-ui.tabs.list>
        <x-ui.tabs.trigger tab="account">Account</x-ui.tabs.trigger>
        <x-ui.tabs.trigger tab="settings">Settings</x-ui.tabs.trigger>
    </x-ui.tabs.list>
 
    <x-ui.tabs.content tab="account">
        <p>Account content here...</p>
    </x-ui.tabs.content>
 
    <x-ui.tabs.content tab="settings">
        <p>Settings content here...</p>
    </x-ui.tabs.content>
</x-ui.tabs>
 
{{-- Pills Style --}}
<x-ui.tabs default="overview">
    <x-ui.tabs.list variant="pills">
        <x-ui.tabs.trigger tab="overview" variant="pills" icon="layout-grid">
            Overview
        </x-ui.tabs.trigger>
    </x-ui.tabs.list>
 
    <x-ui.tabs.content tab="overview">
        <p>Overview content...</p>
    </x-ui.tabs.content>
</x-ui.tabs>

Components

  • <x-ui.tabs> - Main wrapper with default prop
  • <x-ui.tabs.list> - Tab buttons container with variant prop
  • <x-ui.tabs.trigger> - Tab button with tab and icon props
  • <x-ui.tabs.content> - Tab panel with tab prop

Variants

  • underline: Default style with bottom border
  • pills: Rounded pill buttons
  • enclosed: Enclosed tabs with border