Back to the list

Badge

Badges can be used to notify users about important informations: new items, unread messages, etc.

File to include

@import "components/badge";

Empty

<span class="badge" data-size="xxl" data-color="primary"></span>
<span class="badge" data-size="xl" data-color="secondary"></span>
<span class="badge" data-size="l" data-color="success"></span>
<span class="badge" data-size="m" data-color="danger"></span>
<span class="badge" data-size="s" data-color="warning"></span>
<span class="badge" data-size="xs" data-color="gray"></span>
<span class="badge" data-size="xxs" data-color="black"></span>

With number

1 1 1 1 1 1 1 
<span class="badge" data-size="xxl" data-color="primary">1</span>
<span class="badge" data-size="xl" data-color="secondary">1</span>
<span class="badge" data-size="l" data-color="success">1</span>
<span class="badge" data-size="m" data-color="danger">1</span>
<span class="badge" data-size="s" data-color="warning">1</span>
<span class="badge" data-size="xs" data-color="gray">1</span>
<span class="badge" data-size="xxs" data-color="black">1</span>

With icon

<span class="badge" data-size="xxl" data-color="primary">
    <fajny-icon icon-name="star-full-solid"></fajny-icon>
</span>

<span class="badge" data-size="xl" data-color="secondary">
    <fajny-icon icon-name="star-full-solid"></fajny-icon>
</span>

<span class="badge" data-size="l" data-color="success">
    <fajny-icon icon-name="star-full-solid"></fajny-icon>
</span>

<span class="badge" data-size="m" data-color="danger">
    <fajny-icon icon-name="star-full-solid"></fajny-icon>
</span>

<span class="badge" data-size="s" data-color="warning">
    <fajny-icon icon-name="star-full-solid"></fajny-icon>
</span>

<span class="badge" data-size="xs" data-color="gray">
    <fajny-icon icon-name="star-full-solid"></fajny-icon>
</span>

<span class="badge" data-size="xxs" data-color="black">
    <fajny-icon icon-name="star-full-solid"></fajny-icon>
</span>

Attributes

Name Example value Possible values Default Required
data-size xl "xxl" | "xl" | "l" | "m" | "s" | "xs" | "xxs" xxl No
data-color secondary "primary" | "secondary" | "success" | "danger" | "warning" | "gray" | "black" | "white" primary No