Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

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.

Accessibility

Accessibility page anchor

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

Examples

Examples page anchor

Process menu

Process menu page anchor

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

)

Connectivity Menu

Connectivity Menu page anchor

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

)

Composition notes

Composition notes page anchor

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.

Status Menu Item Child

Status Menu Item Child page anchor

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.