Skip to main content
A small filled shape used as a visual marker next to text in tables, legends, and labels. Dot is the smallest possible visual encoding of “this item has a color” — useful anywhere a Badge would be too heavy.

​
Basic Usage

​
Variants

Seven semantic variants map to the same color palette used by Badge and other status-aware components.

​
Shapes

Dots come in three shapes. Circle is the default, square gives a hard-edged block, and rounded splits the difference.

​
Sizes

Three sizes let you match the Dot’s visual weight to surrounding content.

​
Custom Colors

When the semantic variants don’t fit — chart legends, category palettes — use css_class with any background color.

​
With Text

The most common pattern: a Dot paired with a label inside a Row. This works in table cells, card content, legend entries, and anywhere else you need a compact status indicator.

​
API Reference

Dot Parameters

​
variant
str
default:"default"
Semantic color: "default", "secondary", "success", "warning", "destructive", "info", "muted".
​
size
str
default:"default"
Dot size: "sm", "default", "lg".
​
shape
str
default:"circle"
Dot shape: "circle", "square", "rounded".
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes. Use a bg-* class to override the variant color.

​
Protocol Reference

Dot
{
  "type": "Dot",
  "variant?": "default | secondary | success | warning | destructive | info | muted",
  "size?": "sm | default | lg",
  "shape?": "circle | square | rounded",
  "cssClass?": "string"
}
For the complete protocol schema, see Dot.