Dot
Status indicator
Demo
API
Tag
Name | Type | Content | |||||||
---|---|---|---|---|---|---|---|---|---|
m-dot |
Custom tag | Text (optional) |
Attributes
Name | Value | Description | |||||||
---|---|---|---|---|---|---|---|---|---|
type |
|
Sets the type of the indicator and has the same meaning as Alert's type. |
Guidelines
Dot text
In most cases Dot should include text, but sometimes it's okay to have a Dot without text (see Accessibility). An Accordion of system summaries works as a good example:
Databases
All good!
API
All good!
Notification service
Increase in avgerage response time.
Unknown type
A Dot with an unknown type is useful when a generic dot is needed. Another use case is when your app wants to display a dot, but its type is still being determined. A Loader can help communicate in these situations:
Accessibility
When there is no text use aria-label
, e.g. <m-dot type="success" aria-label="Systems okay">
.