Status
Status defines the current state of a process.
Status default
Danger
Info
Success
Warning
Grey
<span class="ds-status ds-status-danger"><i class="icon-tag-filled"></i>Danger</span>
<span class="ds-status ds-status-information"><i class="icon-tag-filled"></i>Info</span>
<span class="ds-status ds-status-success"><i class="icon-tag-filled"></i>Success</span>
<span class="ds-status ds-status-warning"><i class="icon-tag-filled"></i>Warning</span>
<span class="ds-status ds-status-grey"><i class="icon-tag-filled"></i>Grey</span>
Status text
Danger
Info
Success
Warning
Grey
<span class="ds-status ds-status-text ds-status-danger"><i class="icon-tag-filled"></i>Danger</span>
<span class="ds-status ds-status-text ds-status-information"><i class="icon-tag-filled"></i>Info</span>
<span class="ds-status ds-status-text ds-status-success"><i class="icon-tag-filled"></i>Success</span>
<span class="ds-status ds-status-text ds-status-warning"><i class="icon-tag-filled"></i>Warning</span>
<span class="ds-status ds-status-text ds-status-grey"><i class="icon-tag-filled"></i>Grey</span>
Status with circle
Danger
Info
Success
Warning
Grey
<span class="ds-status ds-status-danger "><i class="icon-round-filled"></i>Danger</span>
<span class="ds-status ds-status-information "><i class="icon-round-filled"></i>Info</span>
<span class="ds-status ds-status-success "><i class="icon-round-filled"></i>Success</span>
<span class="ds-status ds-status-warning "><i class="icon-round-filled"></i>Warning</span>
<span class="ds-status ds-status-grey "><i class="icon-round-filled"></i>Grey</span>
Status with circle in oval fill
Danger
Info
Success
Warning
Grey
<span class="ds-status ds-status-text ds-status-danger "><i class="icon-round-filled"></i>Danger</span>
<span class="ds-status ds-status-text ds-status-information "><i class="icon-round-filled"></i>Info</span>
<span class="ds-status ds-status-text ds-status-success "><i class="icon-round-filled"></i>Success</span>
<span class="ds-status ds-status-text ds-status-warning "><i class="icon-round-filled"></i>Warning</span>
<span class="ds-status ds-status-text ds-status-grey "><i class="icon-round-filled"></i>Grey</span>
Guidelines
- Keep labels short.
- Use status colors consistently.