Default
The status should be clear just by reading the text. The color must not have a primary function due to accessibility reasons. When using a badge on the light grey background, you should add a border as illustrated in thefollowing example.
Example
Badge
Badge Error
Badge warning
Badge success
Badge update
1
2
3
4
5
<span class="ox-badge">Badge</span>
<span class="ox-badge ox-badge--error">Badge Error</span>
<span class="ox-badge ox-badge--warning">Badge warning</span>
<span class="ox-badge ox-badge--success">Badge success</span>
<span class="ox-badge ox-badge--update">Badge update</span>
With border
If the badges aren't used on a white background, add the ox-badge--has-border modifier to make it stand out more thanks to the dark edge.
Example
Badge
Badge Error
Badge warning
Badge success
Badge update
1
2
3
4
5
<span class="ox-badge ox-badge--has-border">Badge</span>
<span class="ox-badge ox-badge--error ox-badge--has-border">Badge Error</span>
<span class="ox-badge ox-badge--warning ox-badge--has-border">Badge warning</span>
<span class="ox-badge ox-badge--success ox-badge--has-border">Badge success</span>
<span class="ox-badge ox-badge--update ox-badge--has-border">Badge update</span>
Large
The bigger badges are used to display a status next to a title.
Example
Badge
Badge Error
Badge warning
Badge success
Badge update
1
2
3
4
5
<span class="ox-badge ox-badge--large ox-badge--has-border">Badge</span>
<span class="ox-badge ox-badge--error ox-badge--large ox-badge--has-border">Badge Error</span>
<span class="ox-badge ox-badge--warning ox-badge--large ox-badge--has-border">Badge warning</span>
<span class="ox-badge ox-badge--success ox-badge--large ox-badge--has-border">Badge success</span>
<span class="ox-badge ox-badge--update ox-badge--large ox-badge--has-border">Badge update</span>
Compact
These can be used when there is only limited space.
Example
Badge
Badge Error
Badge warning
Badge success
Badge update
1
2
3
4
5
<span class="ox-badge ox-badge--compact">Badge</span>
<span class="ox-badge ox-badge--error ox-badge--compact">Badge Error</span>
<span class="ox-badge ox-badge--warning ox-badge--compact">Badge warning</span>
<span class="ox-badge ox-badge--success ox-badge--compact">Badge success</span>
<span class="ox-badge ox-badge--update ox-badge--compact">Badge update</span>