Tag

WARNING

Use the <button> tag for interactive elements and <a href="#"> for navigation. For simple text, use the <span> tag.

Default Tag

.c-tag

default tag
-small tag
uppercase text

Show Code

<div class="h-flex h-flex-row h-vertical-center h-wrap gap-8">
    <span class="c-tag">default tag</span><br/>
    <span class="c-tag -small">-small tag</span><br/>
    <span class="c-tag h-type-uppercase">uppercase text</span><br/>
</div>

Tag Colors

.c-tag[.-primary, .-success, .-success-dark, .-warning, .-warning-dark .-error, .-error-dark, .-neutral, .-white]

-primary
-success
-success-dark
-warning
-warning-dark
-error
-error-dark
-neutral
-white

Show Code

<div class="h-flex h-flex-row h-vertical-center h-wrap gap-8">
    <span class="c-tag -primary">-primary</span><br/>
    <span class="c-tag -success">-success</span><br/>
    <span class="c-tag -success-dark">-success-dark</span><br/>
    <span class="c-tag -warning">-warning</span><br/>
    <span class="c-tag -warning-dark">-warning-dark</span><br/>
    <span class="c-tag -error">-error</span><br/>
    <span class="c-tag -error-dark">-error-dark</span><br/>
    <span class="c-tag -neutral">-neutral</span><br/>
    <span class="c-tag -white">-white</span>
</div>

Filter Tag

<button class="c-tag">
    Filter Tag
    <span class="c-tag__icon fas fa-times" aria-hidden="true"></span>
</button>

Select Tag

.c-tag[.-primary, .-success, .-success-dark, .-warning, .-warning-dark .-error, .-error-dark, .-neutral, .-white]

Show Code

<div class="h-flex h-flex-row h-vertical-center h-wrap gap-8">
    <button class="c-tag">
        in arbeit
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button class="c-tag -success">
        geschlossen
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button class="c-tag -success-dark">
        geschlossen
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button class="c-tag -warning">
        on hold
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button class="c-tag -warning-dark">
        on hold
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button class="c-tag -error">
        abgelehnt
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button class="c-tag -error-dark">
        abgelehnt
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button class="c-tag -neutral">
        neutral
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
        <button class="c-tag -white">
        neutral
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
</div>

Disabled Tag

.c-tag[disabled, .-disabled]

<button disabled class="c-tag -filter" type="button">
    Filter Tag
    <span class="c-tag__icon fas fa-times" aria-hidden="true"></span>
</button>