VKbd API

Props

name	type	default
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`tag`	string \| (new () => any) \| FunctionalComponent	'kbd'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.

Slots

never

`default`
The default Vue slot.

SASS Variables

name	default
`$kbd-border`	( $kbd-border-color, $kbd-border-style, $kbd-border-width, $kbd-border-thin-width )
`$kbd-border-color`	rgba(var(--v-border-color), var(--v-border-opacity))
`$kbd-border-radius`	4px
`$kbd-border-style`	solid
`$kbd-border-thin-width`	thin
`$kbd-border-width`	thin
`$kbd-display`	inline-flex
`$kbd-elevation`	1
`$kbd-font-family`	settings.$body-font-family
`$kbd-font-size`	0.875em
`$kbd-font-weight`	normal
`$kbd-line-height`	1
`$kbd-margin-inline`	1px
`$kbd-min-height`	1em
`$kbd-min-width`	20px
`$kbd-padding`	3px 6px

#VKbd API