Kbd

A Kbd represents a keyboard button or shortcut

Usage

+K
import { Kbd } from "@camome/core/Kbd";
import styles from "./Default.module.scss";
export default function Default() {
return (
<div className={styles.container}>
<Kbd></Kbd>
<span>+</span>
<Kbd>K</Kbd>
</div>
);
}

Size

Ctrl+Alt+Delete
import { Kbd } from "@camome/core/Kbd";
export default function Size() {
return (
<div
style={{
display: "flex",
alignItems: "baseline",
gap: "0.3rem",
fontSize: "var(--cmm-font-size-lg)",
}}
>
<Kbd>Ctrl</Kbd>+<Kbd>Alt</Kbd>+<Kbd>Delete</Kbd>
</div>
);
}

Simply set the font-size property to change size.