Badges
Badges are used to display additional information.
Badge
1<x-badge>Badge</x-badge>Pill
Add a pill style to the badge by using the pill attribute.
Pill Badge
1<x-badge pill>Pill Badge</x-badge>Sizes
Change the size of the badge by using the size attribute.
Extra Small
Small
Default
Large
Extra Large
Extra Small
Small
Default
Large
Extra Large
1<x-badge size="xs">Extra Small</x-badge> 2<x-badge size="sm">Small</x-badge> 3<x-badge size="md">Default</x-badge> 4<x-badge size="lg">Large</x-badge> 5<x-badge size="xl">Extra Large</x-badge> 6 7<div class="w-100"></div> 8 9<x-badge pill size="xs">Extra Small</x-badge>10<x-badge pill size="sm">Small</x-badge>11<x-badge pill size="md">Default</x-badge>12<x-badge pill size="lg">Large</x-badge>13<x-badge pill size="xl">Extra Large</x-badge>Colors
Change the color of the badge by using the type attribute.
White
Black
Primary
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
1<x-badge type="white">White</x-badge> 2<x-badge type="black">Black</x-badge> 3<x-badge type="primary">Primary</x-badge> 4<x-badge type="slate">Slate</x-badge> 5<x-badge type="gray">Gray</x-badge> 6<x-badge type="zinc">Zinc</x-badge> 7<x-badge type="neutral">Neutral</x-badge> 8<x-badge type="stone">Stone</x-badge> 9<x-badge type="red">Red</x-badge>10<x-badge type="orange">Orange</x-badge>11<x-badge type="amber">Amber</x-badge>12<x-badge type="yellow">Yellow</x-badge>13<x-badge type="lime">Lime</x-badge>14<x-badge type="green">Green</x-badge>15<x-badge type="emerald">Emerald</x-badge>16<x-badge type="teal">Teal</x-badge>17<x-badge type="cyan">Cyan</x-badge>18<x-badge type="sky">Sky</x-badge>19<x-badge type="blue">Blue</x-badge>20<x-badge type="indigo">Indigo</x-badge>21<x-badge type="violet">Violet</x-badge>22<x-badge type="purple">Purple</x-badge>23<x-badge type="fuchsia">Fuchsia</x-badge>24<x-badge type="pink">Pink</x-badge>25<x-badge type="rose">Rose</x-badge>Label
Label badges have no border and appear lighter. Use the label attribute to create a label badge.
White
Black
Primary
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
1<x-badge label type="white">White</x-badge> 2<x-badge label type="black">Black</x-badge> 3<x-badge label type="primary">Primary</x-badge> 4<x-badge label type="slate">Slate</x-badge> 5<x-badge label type="gray">Gray</x-badge> 6<x-badge label type="zinc">Zinc</x-badge> 7<x-badge label type="neutral">Neutral</x-badge> 8<x-badge label type="stone">Stone</x-badge> 9<x-badge label type="red">Red</x-badge>10<x-badge label type="orange">Orange</x-badge>11<x-badge label type="amber">Amber</x-badge>12<x-badge label type="yellow">Yellow</x-badge>13<x-badge label type="lime">Lime</x-badge>14<x-badge label type="green">Green</x-badge>15<x-badge label type="emerald">Emerald</x-badge>16<x-badge label type="teal">Teal</x-badge>17<x-badge label type="cyan">Cyan</x-badge>18<x-badge label type="sky">Sky</x-badge>19<x-badge label type="blue">Blue</x-badge>20<x-badge label type="indigo">Indigo</x-badge>21<x-badge label type="violet">Violet</x-badge>22<x-badge label type="purple">Purple</x-badge>23<x-badge label type="fuchsia">Fuchsia</x-badge>24<x-badge label type="pink">Pink</x-badge>25<x-badge label type="rose">Rose</x-badge>Invert Colors
Invert the colors of the badges to make them appear on dark backgrounds. Use the invert attribute.
White
Black
Primary
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
1<x-badge invert type="white">White</x-badge> 2<x-badge invert type="black">Black</x-badge> 3<x-badge invert type="primary">Primary</x-badge> 4<x-badge invert type="slate">Slate</x-badge> 5<x-badge invert type="gray">Gray</x-badge> 6<x-badge invert type="zinc">Zinc</x-badge> 7<x-badge invert type="neutral">Neutral</x-badge> 8<x-badge invert type="stone">Stone</x-badge> 9<x-badge invert type="red">Red</x-badge>10<x-badge invert type="orange">Orange</x-badge>11<x-badge invert type="amber">Amber</x-badge>12<x-badge invert type="yellow">Yellow</x-badge>13<x-badge invert type="lime">Lime</x-badge>14<x-badge invert type="green">Green</x-badge>15<x-badge invert type="emerald">Emerald</x-badge>16<x-badge invert type="teal">Teal</x-badge>17<x-badge invert type="cyan">Cyan</x-badge>18<x-badge invert type="sky">Sky</x-badge>19<x-badge invert type="blue">Blue</x-badge>20<x-badge invert type="indigo">Indigo</x-badge>21<x-badge invert type="violet">Violet</x-badge>22<x-badge invert type="purple">Purple</x-badge>23<x-badge invert type="fuchsia">Fuchsia</x-badge>24<x-badge invert type="pink">Pink</x-badge>25<x-badge invert type="rose">Rose</x-badge>Outline
Outline badges have no background. Use the outline attribute to create an outline badge.
White
Black
Primary
Slate
Gray
Zinc
Neutral
Stone
Red
Orange
Amber
Yellow
Lime
Green
Emerald
Teal
Cyan
Sky
Blue
Indigo
Violet
Purple
Fuchsia
Pink
Rose
1<x-badge outline type="white">White</x-badge> 2<x-badge outline type="black">Black</x-badge> 3<x-badge outline type="primary">Primary</x-badge> 4<x-badge outline type="slate">Slate</x-badge> 5<x-badge outline type="gray">Gray</x-badge> 6<x-badge outline type="zinc">Zinc</x-badge> 7<x-badge outline type="neutral">Neutral</x-badge> 8<x-badge outline type="stone">Stone</x-badge> 9<x-badge outline type="red">Red</x-badge>10<x-badge outline type="orange">Orange</x-badge>11<x-badge outline type="amber">Amber</x-badge>12<x-badge outline type="yellow">Yellow</x-badge>13<x-badge outline type="lime">Lime</x-badge>14<x-badge outline type="green">Green</x-badge>15<x-badge outline type="emerald">Emerald</x-badge>16<x-badge outline type="teal">Teal</x-badge>17<x-badge outline type="cyan">Cyan</x-badge>18<x-badge outline type="sky">Sky</x-badge>19<x-badge outline type="blue">Blue</x-badge>20<x-badge outline type="indigo">Indigo</x-badge>21<x-badge outline type="violet">Violet</x-badge>22<x-badge outline type="purple">Purple</x-badge>23<x-badge outline type="fuchsia">Fuchsia</x-badge>24<x-badge outline type="pink">Pink</x-badge>25<x-badge outline type="rose">Rose</x-badge>Link
Badges can be used as links. By default, links will automatically add the wire:navigate attribute. To disable this behavior, add the :navigate="false" or target="_blank" attribute.
1<x-badge href="#">Link</x-badge>2<x-badge href="#" :navigate="false">No Navigate</x-badge>With Icons
Badges can be combined with icons. Use the icon or icon-end attribute to add an icon.
1<x-badge icon="academic-cap--mini" size="xs">Extra Small</x-badge> 2<x-badge icon="information-circle--mini" size="sm">Small</x-badge> 3<x-badge icon="arrows-pointing-in--mini" size="md">Default</x-badge> 4<x-badge icon="chat-bubble-bottom-center--mini" size="lg">Large</x-badge> 5<x-badge icon="credit-card--mini" size="xl">Extra Large</x-badge> 6 7<div class="w-100"></div> 8 9<x-badge icon-end="academic-cap--mini" size="xs">Extra Small</x-badge>10<x-badge icon-end="information-circle--mini" size="sm">Small</x-badge>11<x-badge icon-end="arrows-pointing-in--mini" size="md">Default</x-badge>12<x-badge icon-end="chat-bubble-bottom-center--mini" size="lg">Large</x-badge>13<x-badge icon-end="credit-card--mini" size="xl">Extra Large</x-badge>