--- title: Statuses description: Status dots are particularly useful if you want to make an interface element more noticeable regardless of limited space. --- ## Default markup ```html example vertical height="7rem" Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ```html Blue Azure ... ``` ## Status with dot ```html example code vertical height="7rem" Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ### Animated dot ```html example code vertical height="7rem" Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## Lite status ```html example code vertical height="7rem" Blue Azure Indigo Purple Pink Red Orange Yellow Lime Green Teal Cyan ``` ## Status dots ```html code example centered separated height="7rem" ``` ### Animated dots ```html code example centered separated height="7rem" ``` ## Status indicator ```html code example vertical centered height="7rem" ```