<h3>Standard</h3>

<p>
    Badges use standard styles to indicate different types of information. The
    available styles include: primary, secondary, info, success, warning, and
    danger. Each style is designed to convey a specific meaning or importance
    level, allowing users to quickly understand the context of the badge. For
    example, a "success" badge might indicate a positive status or completion,
    while a "danger" badge could signify an error or critical issue. By using
    these styles consistently across the application, you can enhance user
    experience and ensure that important information is easily recognizable.
</p>

{%- call ui.util.call(show_example) -%}
    {%- raw %}
        {{ ui.badge("Default") }}
        {{ ui.badge("Primary", style="primary") }}
        {{ ui.badge("Secondary", style="secondary") }}
        {{ ui.badge("Info", style="info") }}
        {{ ui.badge("Success", style="success") }}
        {{ ui.badge("Warning", style="warning") }}
        {{ ui.badge("Danger", style="danger") }}
    {%- endraw %}
{%- endcall %}