Dot

Status indicator

Demo

Information Success Warning Error Unknown

API

Tag

Name Type Content
m-dot Custom tag Text (optional)

Attributes

Name Value Description
type
  • info
  • success
  • warn
  • error
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:

Marcus is offline
Marcus is joining
Marcus is online

Accessibility

When there is no text use aria-label, e.g. <m-dot type="success" aria-label="Systems okay">.