Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant
Figma
Star

Status Menu

Version 2.2.0GithubStorybookPeer review pending

A Status Menu communicates the status of a process or connectivity to an application or service, and provides a way to update that status type.

Guidelines

Guidelines page anchor

About Status Menu

About Status Menu page anchor

Use a Status Menu to both display and change the status of a connection or process. It closely follows the Object Status Pattern and comes with preconfigured options for displaying the status of both processes and connections, using the correct icons for each.

Status Menu implements a Menu and supports all the same keyboard navigation that the Menu component does.

Use the process-related variants of Status Menu to display and interact with the status of a particular process.

Use the connectivity-related variants of Status Menu to display and interact with the status of a particular connection.

Status Menu consists of StatusMenu, StatusMenuBadge, StatusMenuItem, StatusMenuItemRadio, StatusMenuItemCheckbox, and useStatusMenuState. These are all namesakes of their Menu equivalents and follow the same API. It also comes with one additional component called StatusMenuItemChild.

StatusMenuItemChild is where the status pattern is implemented. It takes a variant prop that is set to a value that directly relates to one of the connectivity or process status types. It pairs the correct icon with its color implementation for the status. Check out the full list of variant options in the props table.