Summary
The status pattern should be used to visualize textual status'. For numeric status' use badges.
- HTML Attributes
- HTML Classes
- JavaScript Events
- JavaScript Methods
- SASS Functions
- SASS Mixins
- SASS Variables
There are no attributes defined for this pattern.
| Name | Description |
|---|---|
zui-status |
The zui-status class identifies an HTML element as a status label. It is recommended that you use this class on a span element.
|
zui-status-blue |
The zui-status-blue class turns a status label into a blue status.
|
zui-status-brown |
The zui-status-brown class turns a status label into a brown status.
|
zui-status-green |
The zui-status-green class turns a status label into a green status.
|
zui-status-red |
The zui-status-red class turns a status label into a red status.
|
zui-status-subtle |
The zui-status-subtle class turns a status label into a subtle status. This means that the background color is set to white which draws less attention to the status label.
|
zui-status-yellow |
The zui-status-yellow class turns a status label into a yellow status.
|
There are no events defined for this pattern.
There are no methods defined for this pattern.
There are no functions defined for this pattern.
There are no mixins defined for this pattern.
| Name | Description |
|---|---|
zui-status-default-filled-background |
The background color of a filled status. |
zui-status-default-filled-border |
The border of a filled status. |
zui-status-default-filled-color |
The color of a filled status. |
zui-status-default-subtle-background |
The background color of a subtle status. |
zui-status-default-subtle-border |
The border of a subtle status. |
zui-status-default-subtle-color |
The color of a subtle status. |
zui-status-blue-filled-background |
The background color of a blue filled status. |
zui-status-blue-filled-border |
The border of a blue filled status. |
zui-status-blue-filled-color |
The color of a blue filled status. |
zui-status-blue-subtle-background |
The background color of a blue subtle status. |
zui-status-blue-subtle-border |
The border of a blue subtle status. |
zui-status-blue-subtle-color |
The color of a blue subtle status. |
zui-status-brown-filled-background |
The background color of a brown filled status. |
zui-status-brown-filled-border |
The border of a brown filled status. |
zui-status-brown-filled-color |
The color of a brown filled status. |
zui-status-brown-subtle-background |
The background color of a brown subtle status. |
zui-status-brown-subtle-border |
The border of a brown subtle status. |
zui-status-brown-subtle-color |
The color of a brown subtle status. |
zui-status-green-filled-background |
The background color of a green filled status. |
zui-status-green-filled-border |
The border of a green filled status. |
zui-status-green-filled-color |
The color of a green filled status. |
zui-status-green-subtle-background |
The background color of a green subtle status. |
zui-status-green-subtle-border |
The border of a green subtle status. |
zui-status-green-subtle-color |
The color of a green subtle status. |
zui-status-red-filled-background |
The background color of a red filled status. |
zui-status-red-filled-border |
The border of a red filled status. |
zui-status-red-filled-color |
The color of a red filled status. |
zui-status-red-subtle-background |
The background color of a red subtle status. |
zui-status-red-subtle-border |
The border of a red subtle status. |
zui-status-red-subtle-color |
The color of a red subtle status. |
zui-status-yellow-filled-background |
The background color of a yellow filled status. |
zui-status-yellow-filled-border |
The border of a yellow filled status. |
zui-status-yellow-filled-color |
The color of a yellow filled status. |
zui-status-yellow-subtle-background |
The background color of a yellow subtle status. |
zui-status-yellow-subtle-border |
The border of a yellow subtle status. |
zui-status-yellow-subtle-color |
The color of a yellow subtle status. |
Example
Status Status
Status Status
Status Status
Status Status
Status Status
Status Status
Markup
<span class="zui-status">Status</span>
