Use badges as tags or to visualize application state.

Badges are inline indicators that can be used after titles to indicate a certain application state. As inline elements they can be scaled by wrapping them in an element that sets their font-size.


Badges come in the colors most components come in. Just like buttons their color should be used semantically and alerting colors should be used sparingly.


Copyright 2021 VSETH - Verband der Studierenden an der ETH