Dot

Status indicator

Demo

Information Success Warning Error Unknown

See more examples

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 the Dot should have its own text. In some cases it's appropriate to have a Dot on it's own without a message (in those cases 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">.