A small visual element used to highlight status, count, or categories.
Default component
<x-ui::badge>Default</x-ui::badge>Use the variant prop to switch between light and solid styles.
<x-ui::badge variant="default">Default</x-ui::badge>
<x-ui::badge variant="solid">Solid</x-ui::badge>Multiple semantic color options are available.
<x-ui::badge color="zinc">Zinc</x-ui::badge>
<x-ui::badge color="lime">Lime</x-ui::badge>
<x-ui::badge color="green">Green</x-ui::badge>
<x-ui::badge color="yellow">Yellow</x-ui::badge>
<x-ui::badge color="red">Red</x-ui::badge>
<x-ui::badge color="sky">Sky</x-ui::badge>Choose from small, medium, or large sizes.
<x-ui::badge size="sm">Small</x-ui::badge>
<x-ui::badge size="md">Medium</x-ui::badge>
<x-ui::badge size="lg">Large</x-ui::badge>Control the border radius of the badge.
<x-ui::badge rounded="md">Medium</x-ui::badge>
<x-ui::badge rounded="full">Full</x-ui::badge>Add icons to your badges for extra context.
<x-ui::badge icon="check" color="green">Success</x-ui::badge>
<x-ui::badge icon="exclamation-triangle" color="red">Error</x-ui::badge>
<x-ui::badge icon="bell" iconPosition="right" color="sky">Notifications</x-ui::badge>