Status
Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited
space.
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
Set the style
prop to dot to change status mode to circle shape.
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
#
Status with animated dots
Set the animated
prop to change status mode to animated.
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan
#
Lite status with animated dots
Primary
Secondary
Success
Warning
Danger
Info
Light
Dark
Blue
Azure
Indigo
Purple
Pink
Red
Orange
Yellow
Lime
Green
Teal
Cyan