Composables
Kbd Element
Style keyboard input elements with configurable background, color, font, border radius, and padding using the useKbdElement composable.
Overview
The useKbdElement composable styles the kbd element for displaying keyboard shortcuts and key combinations. It creates a compact, visually distinct key cap appearance with configurable background, color, font, border radius, and padding.
useKbdElement
function useKbdElement(
s: Styleframe,
options?: WithThemes<KbdElementConfig>
): KbdElementResult
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useKbdElement } from '@styleframe/theme';
const s = styleframe();
const {
kbdBackground,
kbdColor,
kbdFontFamily,
kbdFontSize,
kbdBorderRadius,
kbdPaddingBlock,
kbdPaddingInline,
} = useKbdElement(s);
export default s;
styleframe/index.css
:root {
--kbd--background: #1e293b;
--kbd--color: #ffffff;
--kbd--font-family: var(--font-family--mono);
--kbd--font-size: 0.875em;
--kbd--border-radius: var(--border-radius--sm);
--kbd--padding-block: 0.1875rem;
--kbd--padding-inline: 0.375rem;
}
kbd {
background: var(--kbd--background);
color: var(--kbd--color);
font-family: var(--kbd--font-family);
font-size: var(--kbd--font-size);
border-radius: var(--kbd--border-radius);
padding-block: var(--kbd--padding-block);
padding-inline: var(--kbd--padding-inline);
display: inline-block;
}
kbd > kbd {
padding-block: 0;
padding-inline: 0;
font-size: 1em;
}
The composable also sets display: inline-block on the kbd element. Nested kbd > kbd elements have their padding and font size reset to avoid double-styling compound key combinations like Ctrl+C.
Default Values
| Option | Default | Variable | Export |
|---|---|---|---|
background | "#1e293b" | --kbd--background | kbdBackground |
color | "#ffffff" | --kbd--color | kbdColor |
fontFamily | "@font-family.mono" | --kbd--font-family | kbdFontFamily |
fontSize | "0.875em" | --kbd--font-size | kbdFontSize |
borderRadius | "@border-radius.sm" | --kbd--border-radius | kbdBorderRadius |
paddingBlock | "0.1875rem" | --kbd--padding-block | kbdPaddingBlock |
paddingInline | "0.375rem" | --kbd--padding-inline | kbdPaddingInline |
The default configuration includes a dark theme that inverts the colors: background: "@color.white" and color: "@color.black".
Custom Values
styleframe.config.ts
import { styleframe } from 'styleframe';
import { useKbdElement } from '@styleframe/theme';
const s = styleframe();
const { kbdBackground, kbdColor } = useKbdElement(s, {
background: '@color.gray-100',
color: '@color.gray-800',
borderRadius: '@border-radius.md',
paddingBlock: '0.25rem',
paddingInline: '0.5rem',
});
export default s;
styleframe/index.css
:root {
--kbd--background: var(--color--gray-100);
--kbd--color: var(--color--gray-800);
--kbd--font-family: var(--font-family--mono);
--kbd--font-size: 0.875em;
--kbd--border-radius: var(--border-radius--md);
--kbd--padding-block: 0.25rem;
--kbd--padding-inline: 0.5rem;
}
kbd {
background: var(--kbd--background);
color: var(--kbd--color);
font-family: var(--kbd--font-family);
font-size: var(--kbd--font-size);
border-radius: var(--kbd--border-radius);
padding-block: var(--kbd--padding-block);
padding-inline: var(--kbd--padding-inline);
display: inline-block;
}
kbd > kbd {
padding-block: 0;
padding-inline: 0;
font-size: 1em;
}
Best Practices
- Use high-contrast colors: Ensure sufficient contrast between background and text for readability.
- Use a monospace font: The default monospace font helps users recognize keyboard shortcuts at a glance.
- Customize per-theme: The default dark theme inverts colors automatically. Override the
themesoption if your dark mode needs different values. - Rely on the nested reset: Compound key combinations using nested
kbdelements (e.g.,<kbd><kbd>Ctrl</kbd>+<kbd>C</kbd></kbd>) are automatically handled.