Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    Kbd

    Shows a keyboard key or shortcut.

    Storybook
    Storybook
    Source
    Source

    The example below loads live from Storybook; open it in Storybook to use the controls.

    Live example, StorybookOpen in Storybook

    Default

    Section titled “Default”

    keys takes a combination in press order. mod shows as ⌘ on Apple platforms and Ctrl elsewhere.

    ControlK
    import { Kbd, Provider } from '@bigbang/ui';
    

    export default function Default() {
      return (
        <Provider locale="en-GB">
          <Kbd keys={['mod', 'K']} />
        </Provider>
      );
    }

    Named keys

    Section titled “Named keys”

    Named keys get a symbol or short text; a screen reader reads each one in the Provider’s language.

    CommandShiftAltEnterEscapeUp arrowDown arrow
    ControlShiftAltTab
    import { Kbd, Provider } from '@bigbang/ui';
    

    export default function NamedKeys() {
      return (
        <Provider locale="en-GB">
          <div className="flex flex-col items-start gap-md">
            <div className="flex flex-wrap gap-sm">
              <Kbd keys={['mod']} platform="apple" />
              <Kbd keys={['shift']} platform="apple" />
              <Kbd keys={['alt']} platform="apple" />
              <Kbd keys={['enter']} />
              <Kbd keys={['escape']} />
              <Kbd keys={['up']} />
              <Kbd keys={['down']} />
            </div>
            <div className="flex flex-wrap gap-sm">
              <Kbd keys={['mod']} platform="other" />
              <Kbd keys={['shift']} platform="other" />
              <Kbd keys={['alt']} platform="other" />
              <Kbd keys={['tab']} platform="other" />
            </div>
          </div>
        </Provider>
      );
    }

    In text

    Section titled “In text”

    Use size="sm" inside body text.

    Press ControlK to search.

    import { Kbd } from '@bigbang/ui';
    

    export default function InText() {
      return (
        <p className="type-body-md text-fg-default">
          Press <Kbd keys={['mod', 'K']} size="sm" /> to search.
        </p>
      );
    }

    In a tooltip

    Section titled “In a tooltip”

    Show an action’s shortcut inside a Tooltip.

    import { Button, Kbd, Tooltip } from '@bigbang/ui';
    

    export default function InTooltip() {
      return (
        <Tooltip
          content={
            <span className="inline-flex items-center gap-sm">
              Save <Kbd keys={['mod', 'S']} size="sm" />
            </span>
          }
        >
          <Button variant="secondary">Save</Button>
        </Tooltip>
      );
    }

    Light and dark mode

    Section titled “Light and dark mode”

    The key takes the color-surface-layer-2 background and has no border.

    CommandShiftAltEnterEscapeUp arrowDown arrow
    ControlShiftAltTab
    CommandShiftAltEnterEscapeUp arrowDown arrow
    ControlShiftAltTab
    import { Kbd, Provider } from '@bigbang/ui';
    

    export default function NamedKeys() {
      return (
        <Provider locale="en-GB">
          <div className="flex flex-col items-start gap-md">
            <div className="flex flex-wrap gap-sm">
              <Kbd keys={['mod']} platform="apple" />
              <Kbd keys={['shift']} platform="apple" />
              <Kbd keys={['alt']} platform="apple" />
              <Kbd keys={['enter']} />
              <Kbd keys={['escape']} />
              <Kbd keys={['up']} />
              <Kbd keys={['down']} />
            </div>
            <div className="flex flex-wrap gap-sm">
              <Kbd keys={['mod']} platform="other" />
              <Kbd keys={['shift']} platform="other" />
              <Kbd keys={['alt']} platform="other" />
              <Kbd keys={['tab']} platform="other" />
            </div>
          </div>
        </Provider>
      );
    }