{%- extends "theming/base_component.html" -%}

{%- block overview -%}

    <p>
        The <code>badge</code> component displays status badges and indicators
        that provide quick visual information about states, counts, or
        categories. Badges are compact elements that draw attention to
        important information without requiring significant interface
        space. They're commonly used for showing notification counts, status
        indicators, or categorizing content.
    </p>

    <p>
        Badge components typically come in different styles to indicate
        different types of information: success badges for positive states,
        warning badges for cautionary information, error badges for problems,
        and neutral badges for general information. The component handles
        consistent sizing, coloring, and positioning to ensure badges are
        visually distinct and appropriately styled based on their purpose.
    </p>
{%- endblock %}