Kbd

Kbd defines how EnterUI handles compact keyboard key styling, including default structure, accessible states, and token-driven styling.

#Default usage

<HStack gap={12} wrap>
  <Kbd>Cmd</Kbd>
  <Kbd>K</Kbd>
  <Text as="span" tone="muted">Open command menu</Text>
</HStack>

#Import

import { HStack, Kbd, Text } from "@froggdesign/enter-ui-react";

#Accessibility

Kbd renders a semantic kbd element. Keep shortcut text short and match the platform where possible.

#API

• Extends native kbd element props.
• Use children for the displayed key label.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.