Kbd: Blazor kbd component

Examples

Small, Medium (default) and Large.

Esc Tab Space

website/Examples/DataDisplay/KbdSizesExample.razor Source

Join keys with a plus, or drop one into a sentence.

Ctrl + K Search projects

⌘ + ⇧ + P Command palette

Press Space to preview the selected file.

website/Examples/DataDisplay/KbdShortcutsExample.razor Source

Lay keys out with flex to draw a cluster.

▲

◀ ▼ ▶

website/Examples/DataDisplay/KbdArrowsExample.razor Source

⌘ K

ChildContent

Size Size

<Kbd Size="Size.Large">⌘ K</Kbd>

DaisyBlazor

Size Size
= Size.Medium
Size of the key cap. Small → kbd-sm, Medium → kbd-md, Large → kbd-lg (pass kbd-xs / kbd-xl via Class).
Class string
= null
Extra CSS classes added to the kbd element.
Style string
= null
Inline CSS style applied to the kbd element.

Name	Type	Default	Description
Size	Size	Size.Medium	Size of the key cap. Small → kbd-sm, Medium → kbd-md, Large → kbd-lg (pass kbd-xs / kbd-xl via Class).
Class	string	null	Extra CSS classes added to the kbd element.
Style	string	null	Inline CSS style applied to the kbd element.

ChildContent RenderFragment
Content displayed inside the key cap (text or nested elements).

Name	Type	Description
ChildContent	RenderFragment	Content displayed inside the key cap (text or nested elements).