Tag

Compact pills with generous horizontal padding for labeling, filtering, categories, and active filters.

Component Syntax

blade

<x-aura::tag variant="default" size="md">
    Label
</x-aura::tag>

1. Tag Variants

blade

Default Subtle Neutral Outline

<x-aura::tag variant="default">
    Default
</x-aura::tag>

<x-aura::tag variant="subtle">
    Subtle
</x-aura::tag>

<x-aura::tag variant="neutral">
    Neutral
</x-aura::tag>

<x-aura::tag variant="outline">
    Outline
</x-aura::tag>

2. Tag Sizes

blade

Extra Small Small Medium Large Extra Large

<x-aura::tag size="xs" variant="default">
    Extra Small
</x-aura::tag>

<x-aura::tag size="sm" variant="default">
    Small
</x-aura::tag>

<x-aura::tag size="md" variant="default">
    Medium
</x-aura::tag>

<x-aura::tag size="lg" variant="default">
    Large
</x-aura::tag>

<x-aura::tag size="xl" variant="default">
    Extra Large
</x-aura::tag>

Component Props

Available properties and configurations for the tag component.

Prop	Default	Available Values
variant	default	default primary success warning danger
size	md	xs sm md lg xl
shape	pill	pill rounded
pill	false	true false
rounded	false	true false

Aura Wire

Component Library

Tag

Component Syntax

1. Tag Variants

2. Tag Sizes

Component Props

Animate

Separator

Aura Wire