Skip to content

Add kbd styling and/or component #5016

@j-m

Description

@j-m

I would like there to be styling for the kbd tag so I can indicate shortcuts like:
Alt + A

Looking at the Figma (code page) there is also a note that says this needs to be done
image
(also kinda briefly mentioned in #1573)

Currently the only styling is

code, pre, kbd, samp {
    font-family: "Roboto Mono", Consolas, Menlo, Courier, monospace;
}

The linked code

  kbd {
    padding: 0.2em;
    border: $euiBorderThin;
    border-bottom-color: shadeOrTint($euiColorLightShade, 10%, 10%);
    border-radius: $euiBorderRadius;
    box-shadow: inset 0 -1px 0 $euiColorLightShade;
  }

is not in EUI (or at least in the non-Amsterdam theme)

I thought I'd raise an issue as I couldn't find one.

It might be good if we could create a new component to limit what combinations we can use - I doubt it's good for people to use <kbd> for non-shortcuts e.g.

<EuiKeyboard 
  char: 'A' | 'B' | 'C' ...
  ctrl?: boolean
  shift?: boolean
  alt?: boolean 
  win?: boolean
  cmd?: boolean
/>

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions