Skip to contentSkip to navigationSkip to topbar
Figma
Star

Status Menu

Version 2.1.1GithubStorybookPeer 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.

Component preview theme
const ProcessStatusMenu = () => {
const [process, setProcess] = React.useState(ProcessObject.Success);
const menu = useStatusMenuState();
const onClick = (status) => {
setProcess(ProcessObject[status]);
menu.hide();
};
return (
<>
<StatusMenuBadge {...menu} i18nButtonLabel="Change account" variant={process.variant}>
{process.children}
</StatusMenuBadge>
<StatusMenu {...menu} aria-label="Preferences">
<StatusMenuItemRadio
{...menu}
name="process"
value="success"
checked={process.children === ProcessObject.Success.children}
onClick={() => onClick('Success')}
variant="default"
>
<StatusMenuItemChild variant="ProcessSuccess">{ProcessObject.Success.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="neutral"
checked={process.children === ProcessObject.Neutral.children}
onClick={() => onClick('Neutral')}
variant="default"
>
<StatusMenuItemChild variant="ProcessNeutral">{ProcessObject.Neutral.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="warning"
checked={process.children === ProcessObject.Warning.children}
onClick={() => onClick('Warning')}
variant="default"
>
<StatusMenuItemChild variant="ProcessWarning">{ProcessObject.Warning.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="error"
checked={process.children === ProcessObject.Error.children}
onClick={() => onClick('Error')}
variant="default"
>
<StatusMenuItemChild variant="ProcessError">{ProcessObject.Error.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="InProgress"
checked={process.children === ProcessObject.InProgress.children}
onClick={() => onClick('InProgress')}
variant="default"
>
<StatusMenuItemChild variant="ProcessInProgress">{ProcessObject.InProgress.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="disabled"
checked={process.children === ProcessObject.Disabled.children}
onClick={() => onClick('Disabled')}
variant="default"
>
<StatusMenuItemChild variant="ProcessDisabled">{ProcessObject.Disabled.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="draft"
checked={process.children === ProcessObject.Draft.children}
onClick={() => onClick('Draft')}
variant="default"
>
<StatusMenuItemChild variant="ProcessDraft">{ProcessObject.Draft.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
</StatusMenu>
</>
);
};
render(
<ProcessStatusMenu />
)

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 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.

Component preview theme
const ProcessStatusMenu = () => {
const [process, setProcess] = React.useState(ProcessObject.Success);
const menu = useStatusMenuState();
const onClick = (status) => {
setProcess(ProcessObject[status]);
menu.hide();
};
return (
<>
<StatusMenuBadge {...menu} i18nButtonLabel="Change account" variant={process.variant}>
{process.children}
</StatusMenuBadge>
<StatusMenu {...menu} aria-label="Preferences">
<StatusMenuItemRadio
{...menu}
name="process"
value="success"
checked={process.children === ProcessObject.Success.children}
onClick={() => onClick('Success')}
variant="default"
>
<StatusMenuItemChild variant="ProcessSuccess">{ProcessObject.Success.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="neutral"
checked={process.children === ProcessObject.Neutral.children}
onClick={() => onClick('Neutral')}
variant="default"
>
<StatusMenuItemChild variant="ProcessNeutral">{ProcessObject.Neutral.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="warning"
checked={process.children === ProcessObject.Warning.children}
onClick={() => onClick('Warning')}
variant="default"
>
<StatusMenuItemChild variant="ProcessWarning">{ProcessObject.Warning.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="error"
checked={process.children === ProcessObject.Error.children}
onClick={() => onClick('Error')}
variant="default"
>
<StatusMenuItemChild variant="ProcessError">{ProcessObject.Error.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="InProgress"
checked={process.children === ProcessObject.InProgress.children}
onClick={() => onClick('InProgress')}
variant="default"
>
<StatusMenuItemChild variant="ProcessInProgress">{ProcessObject.InProgress.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="disabled"
checked={process.children === ProcessObject.Disabled.children}
onClick={() => onClick('Disabled')}
variant="default"
>
<StatusMenuItemChild variant="ProcessDisabled">{ProcessObject.Disabled.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
{...menu}
name="process"
value="draft"
checked={process.children === ProcessObject.Draft.children}
onClick={() => onClick('Draft')}
variant="default"
>
<StatusMenuItemChild variant="ProcessDraft">{ProcessObject.Draft.children}</StatusMenuItemChild>
</StatusMenuItemRadio>
</StatusMenu>
</>
);
};
render(
<ProcessStatusMenu />
)

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

Component preview theme
const ConnectivityStatusMenu = () => {
const [availability, setConnectivity] = React.useState(ConnectivityObject.Available);
const menu = useStatusMenuState();
const onClick = (status) => {
setConnectivity(ConnectivityObject[status]);
menu.hide();
};
return (
<>
<StatusMenuBadge {...menu} i18nButtonLabel="Change account" variant={availability.variant}>
{availability.children}
</StatusMenuBadge>
<StatusMenu {...menu} aria-label="Preferences">
<StatusMenuItemRadio
name="availability"
checked={availability.children === 'Available'}
value="available"
{...menu}
onClick={() => onClick('Available')}
variant="default"
>
<StatusMenuItemChild variant="ConnectivityAvailable">Available</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
name="availability"
checked={availability.children === 'Busy'}
value="busy"
{...menu}
onClick={() => onClick('Busy')}
variant="default"
>
<StatusMenuItemChild variant="ConnectivityBusy">Busy</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
name="availability"
checked={availability.children === 'Unavailable'}
value="unavailable"
{...menu}
onClick={() => onClick('Unavailable')}
variant="default"
>
<StatusMenuItemChild variant="ConnectivityUnavailable">Unavailable</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
name="availability"
checked={availability.children === 'Neutral'}
value="neutral"
{...menu}
onClick={() => onClick('Neutral')}
variant="default"
>
<StatusMenuItemChild variant="ConnectivityNeutral">Neutral</StatusMenuItemChild>
</StatusMenuItemRadio>
<StatusMenuItemRadio
name="availability"
checked={availability.children === 'Offline'}
value="offline"
{...menu}
onClick={() => onClick('Offline')}
variant="default"
>
<StatusMenuItemChild variant="ConnectivityOffline">Offline</StatusMenuItemChild>
</StatusMenuItemRadio>
</Menu>
</>
);
};
render(
<ConnectivityStatusMenu />
)

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.