Design System Component Test

{{-- Design Tokens Verification --}}

1. Design Tokens

--sb-navy

--sb-primary

--sb-success

--sb-danger

{{-- Button Component Tests --}}

2. Button Component

Variants

Primary Secondary Success Danger Outline Ghost

Sizes

Small Medium Large

States

Disabled Loading

With Icons

Add New Delete Back

{{-- Input Component Tests --}}

3. Input Component

Basic

With Icon

Required

With Helper

Error State

Sizes

{{-- Select Component Tests --}}

4. Select Component

@php $countries = [ ['value' => 'za', 'label' => 'South Africa'], ['value' => 'us', 'label' => 'United States'], ['value' => 'uk', 'label' => 'United Kingdom'], ]; $statuses = ['active' => 'Active', 'inactive' => 'Inactive', 'pending' => 'Pending']; @endphp

Object Array Options

Key-Value Options

Clearable

{{-- Card Utility Classes Test --}}

5. Card Utility Classes

Card Header

This card uses the design token utility classes.

Save

Card Footer

{{-- Badge Component Tests --}}

6. Badge Component

Status Variants with Dots

Online Offline Warning Info Critical

Standard Variants

Primary Secondary Success Danger Default

Outlined Style

Outlined Success Error

Sizes

Small Medium

With Icons

Verified Protected Pending Featured

Pill Shape

Active New Beta

Closable

Tag 1 Tag 2 Filter

{{-- Status Badge CSS Utility Classes --}}

7. CSS Badge Utilities

Online Offline Warning Info Critical