Description

Dot is a component that marks updates in the interface. For example, it shows that a new item has appeared in the button, selection, tab, filter, or dropdown menu.

TIP

Keep in mind that a dot isn’t used to display the status of a feature, new data types, or tabs in the report. It cannot be green, red, blue, or any other color. It can only be orange.

You can use it to:

• draw the user's attention to updated controls and menu items. Clicking an item with a dot will reveal other items marked with a dot.
• show new notifications, like in a blog.

TIP

Dot must disappear after user clicks/hovers over an item with a dot. See the details of these cases below.

Appearance

Sizes and margins

The component has two sizes: M and L.

Dot sizes

Size	Margins	Usage
M		Use it to mark text items inside the list.
		Use it to mark images/controls inside the list.
L		Use it to mark controls from the outside.
L with a counter inside		Use it to mark controls from the outside and show the number of updates.

Location

Dot component can be set to the up right corner of the control or inside the list. In cases where a dot is above the component, it is always has transform: translate (30%, -30%).

If dot shows an update in the control, locate it in the upper right corner above the component. Use size="l" and up props.

If dot points to a new element in the list inside the DropdownMenu, it is located to the right of the item text and has a smaller size (use size="m" prop).

Counter

The dot may contain a notification counter, and for more information about this, you can refer to the Counter for more information about this case.

TIP

When the dot has a counter, it increases in size accordingly.

Dot with and without a counter

Dot type	Appearance example
Without a counter
With a counter

If there is one update, show a dot without a counter inside.

If there are more than nine updates, shorten the value displayed in the counter to 9+. When the counter with a large value is used inside the dot, it “grows” only inside the control.

TIP

Note that this behavior isn’t implemented in the component.

Usage with different controls

The dot has a standard size, making it compatible with controls of various types and sizes.

Interaction

We have two scenarios of how the dot disappears from a component or an item in the list:

Interaction with Dot

Scenario	Conditions under which the dot disappears
The dot disappears from the control	after the user has hovered all the new items of the list.
	after the user has clicked on all new items of the list.
The dot disappears from an item in the list	after the user has hovered a new item of the list.
	after the user has clicked on a new item of the list.