Hint Dot

Import#

import { HintDot } from '@volue/wave-react';

Examples#

Basic#

HintDot is just a small decorative indicator often used as a more compact alternative for a Label. It can be used to point out that something has changed or grab user's attention without giving a count.

Sizes#

By default HintDot will inherit its size from the parent element's text size. Use size prop to pick one of the predefined sizes: medium and small.

Tone#

Use the tone property to indicate the intent. Default tones correspond with functional color tokens roles.

Placement#

HintDot is typically placed on the trailing end of icons, components or text.

With help of Anchor component you can attach HintDot to a corner of an element to indicate the status of that element.

Accessible label#

When the intent isn't provided by accompanying text, it's highly recommended to provide an aria-label for assistive tech users.

Cut-out effect#

When HintDot is overlapping with other element, you can simulate a cut-out effect with an outline ring by using the showOutlineRing property.

Custom tone#

You can provide a custom tone by using tone="custom" property and setting the color property to one of the color tokens.

Status list#

HintDot enables creating statuses tailored to your app's need.

On dark background#

When using dot indicator on a dark background, it can be given a thin outline border for better constrast by setting the outline property to true

App header status#

API Reference#