Keyboard key<mds-keyboard-key>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
nameenumSets the code of the keyboard key for combination tests if try attribute is set from mds-keyboard parent component
pressedpressedbooleanSets if the key is pressed or not
Overview
The <mds-keyboard-key> web component renders a single physical-looking keycap inside a <mds-keyboard> parent, supplying the visual unit for one key of a shortcut combination (e.g. the Ctrl or C in Ctrl + C). It has no direct HTML equivalent - it is a presentational glyph whose meaning and test behavior are orchestrated by the parent.
Semantic Behavior
Compound child only: It must be a direct slot child of <mds-keyboard>; it is not used standalone or mixed with other element types, since the parent reads its name to build the key combination and inserts + separators between keys.Glyph resolution from name: When name maps to a known icon (arrows, command, shift, enter, tab, space, etc.) it renders that icon; otherwise it renders the key’s alias from the dictionary (e.g. Ctrl, Esc).Keyboard-side indicator: For the side-specific names (shiftleft, controlright, …), it appends an l / r label.Pressed state is parent-driven: The pressed prop is toggled by <mds-keyboard> during a verification test as the user types; it is not meant to be set manually for presentational use.Localized title: The host receives a localized title describing the key (el/en/es/it).No interactive role: The keycap is purely visual - it exposes no role, focus handling, or emitted events of its own.
Properties & Visual Configurations
This child has essentially no presentational configuration; it does not use the shared variant / tone ladders from agents/variants.md.name is the only meaningful authoring prop: set it to the canonical key code (one value from the keyboard key dictionary, e.g. control, arrowup, c) for the key this cap represents. It selects the displayed glyph or alias and feeds the parent’s combination matching.pressed is a state hook, not an authoring choice - let the parent set it during a test. Leave it unset for a static shortcut display.