Getting Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Banner
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Command
- Collapsible
- Combobox
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Editor
- Input
- Input Group
- Label
- Loading Spinner
- Native Select
- Popover
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Steps
- Switch
- Tabs
- Textarea
- Tooltip
Patterns
Badge
Displays a badge or a component that looks like a badge.
Badge
Component Code
<april:badge>Badge</april:badge>
Component Code
<april:badge>Badge</april:badge>
Variant examples
The badge component comes in multiple variants
Default
Badge
Component Code
<april:badge>Badge</april:badge>
Component Code
<april:badge>Badge</april:badge>
Secondary
Secondary
Component Code
<april:badge variant="secondary">Secondary</april:badge>
Component Code
<april:badge variant="secondary">Secondary</april:badge>
Outline
Outline
Component Code
<april:badge variant="outline">Outline</april:badge>
Component Code
<april:badge variant="outline">Outline</april:badge>
Destructive
Destructive
Component Code
<april:badge variant="destructive">Destructive</april:badge>
Component Code
<april:badge variant="destructive">Destructive</april:badge>
Publishing Views
Use the following command to publish this view:
php artisan april:publish badge
php artisan april:publish badge
php artisan april:publish --all
php artisan april:publish --all