Keyboard Shortcut

A component that displays keyboard shortcuts and can optionally highlight when the keys are pressed. It's useful for showing keyboard shortcuts in your application.

ShiftS

Press both keys.

Props

Name	Default	Type
`keys`	—	`string` The key or combination of keys to display (e.g., `Escape` or `Ctrl+A`)
`label`	—	`string` Custom label to display instead of the automatically formatted keys
`highlight`	`false`	`boolean` Whether to highlight the shortcut when the keys are pressed

Slots

Name	Accepts	Description
`default`	`any`	Content to be displayed instead of the label or selected keys. This is useful when you want to display an icon instead of just text.

Events

Name	Payload	Description
`trigger`	-	Emitted when the key or combination of keys is pressed

KbdGroup

You can wrap individual <Kbd /> components in a <KbdGroup /> in case you want to visually distinguish each key inside a keyboard shortcut.

Slots

Name	Accepts	Description
`default`	`<Kbd>`	Individual keys inside a shortcut. Any other component will error.

Events

Name	Payload	Description
`trigger`	-	Emitted once all the `<Kbd />` components are triggered