Badges

The Badge component in Electrik Slate UI is a flexible and customizable element that allows users to display labels, counts, or status indicators. It supports various features like dark mode, customizable sizes, icons, and outlined styles.

The following example demonstrates a simple badge with a primary background and default size:

<x-slate::badge color="primary">
    New
</x-slate::badge>

This example shows how to use an icon within a badge:

<x-slate::badge color="success" icon="carbon-checkmark">
    Success
</x-slate::badge>

This example shows a badge with an outlined style:

<x-slate::badge color="danger" outlined>
    Danger
</x-slate::badge>

This example showcases badges using explicit black and white modes, which adapt correctly to dark mode:

<x-slate::badge color="black" size="lg">
    Black Badge
</x-slate::badge>
<x-slate::badge color="white" size="lg" outlined>
    White Badge
</x-slate::badge>

You can control the size of the badge using the size prop:

<x-slate::badge color="secondary" size="xs">
    XS Badge
</x-slate::badge>
<x-slate::badge color="secondary" size="sm">
    Small Badge
</x-slate::badge>
<x-slate::badge color="secondary" size="lg">
    Large Badge
</x-slate::badge>

This example combines both an icon and outlined style in a badge:

<x-slate::badge color="info" icon="carbon-information" outlined>
    Info
</x-slate::badge>

The Badge component is highly customizable, allowing you to control its appearance and behavior to fit the needs of your application. Whether you need a simple label, a status indicator with an icon, or an outlined badge for emphasis, the Badge component can accommodate your design requirements.