--- title: Status summary: A status dot is particularly useful when you want to make an interface element more noticeable in limited space. description: Highlight the state of an element with a small status badge. Add colors, dots, and animations to make statuses easy to scan. related: [/ui/components/badge] source: core/scss/ui/_status.scss classnames: component: - class: status desc: Container element, a label with a marker part: - class: status-dot desc: Small dot marker - class: status-indicator desc: Larger marker, usually on its own style: - class: status-lite desc: Transparent background, keeps only the marker and the text - class: status-indicator-circle desc: Solid circle inside the indicator behavior: - class: status-dot-animated desc: Pulsing dot, for a live state - class: status-indicator-animated desc: Pulsing indicator color: - class: status-{color} desc: Any base color, for example status-green or status-danger --- import Example from '@components/Example.astro'; import CodeDocs from '@components/CodeDocs.astro'; ## Default markup Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/ui/base/colors) section. Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ## Status with dot You can add a dot to the status to make it more noticeable. To do this, use the `.status-dot` element inside the `.status` element. Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ### Animated dot You can also animate the dot to make it more noticeable. To do this, add a `.status-dot-animated` class to the `.status-dot` element. Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ## Lite status Use the lite status to make the status less noticeable. To do this, add a `.status-lite` class to the `.status` element. Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ## Status dots If you need only dot status, you can use the `.status-dot` class. The dots can also be animated. To do this, add the `.status-dot-animated` class. ```html ``` The animated status dots can be used in the same way as the regular status dots. ## Status indicator Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, also add the `.status-indicator-animated` class. ## Accessibility - A status dot is decoration. The state has to be in text next to it - a screen reader ignores a colored circle, and so does anyone who cannot tell the colors apart. - Do not use red and green alone to separate "down" from "up". Pair the color with a word, an icon, or a shape. - An animated dot repeats forever. Keep it for a state that really is live, and respect `prefers-reduced-motion` in your own CSS if you add more motion. - When a status changes while the page is open, announce it from a live region elsewhere rather than making the dot itself one. ## SCSS variables Use these SCSS variables to customize statuses. The default values are: