Class name Type
indicator Component Container element
indicator-item Component will be placed on the corner of sibiling
indicator-start Utility align horizontally to the left
indicator-center Utility align horizontally to the center
indicator-end Utility align horizontally to the right (default)
indicator-top Utility align vertically to top (default)
indicator-middle Utility align vertically to middle
indicator-bottom Utility align vertically to bottom
Examples
an empty badge as indicator
Preview
HTML
content
a badge as indicator
Preview
HTML
new
content
a badge as indicator for tab
Preview
HTML
a badge as indicator for button
Preview
HTML
99+
a badge as indicator for image (canter and middle)
Preview
HTML
Text Here
a badge as indicator for avatar
Preview
HTML
typing…
a button as indicator for card
Preview
HTML

Job Title

Rerum reiciendis beatae tenetur excepturi

a badge as indicator for input
Preview
HTML
Available
indicator indicator-start
Preview
HTML
content
indicator indicator-center
Preview
HTML
content
indicator [indicator-end is default]
Preview
HTML
content
indicator indicator-middle indicator-start
Preview
HTML
content
indicator indicator-middle indicator-center
Preview
HTML
content
indicator indicator-middle [indicator-end is default]
Preview
HTML
content
indicator indicator-bottom indicator-start
Preview
HTML
content
indicator indicator-bottom indicator-center
Preview
HTML
content
indicator indicator-bottom [indicator-end is default]
Preview
HTML
content
multiple indicators
Preview
HTML
1
2
3
4
5
6
7
8
9
content