Keyboard
Keyboard is used to define text as keyboard input.
| install | yarn add @react-spectrum/typography |
|---|---|
| version | 3.0.0-alpha.1 |
| usage | import {Keyboard} from '@react-spectrum/typography' |
Example#
<Keyboard>⌘V</Keyboard>Content#
Keyboard is related to typography components and is a child to other components. Keyboard is used to format text indicating that is a keyboard command. Based on the component it is used within, it gets Spectrum styling and may have a preassigned slot for positioning. By virtue of its name, the Keyboard component provides semantic meaning in the context they are placed. An example of its usage in Menu. It is important to note that the Keyboard component accepts any renderable node, not just strings.
See the MDN docs for more information.
Props#
| Name | Type | Default | Description |
children | ReactNode | — | Keyboard shortcut text |
UNSAFE_className | string | — | The className to apply to the element. Do not use unless completely necessary as it may break component styling. |
UNSAFE_style | CSSProperties | — | The inline styles to apply to the element. Do not use unless completely necessary as it may break component styling. |
Layout
| Name | Type | Default | Description |
flex | string | number | boolean | — | |
flexGrow | number | — | |
flexShrink | number | — | |
flexBasis | number | string | — | |
alignSelf | 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'stretch' | — | |
justifySelf | 'auto'
| 'normal'
| 'start'
| 'end'
| 'flex-start'
| 'flex-end'
| 'self-start'
| 'self-end'
| 'center'
| 'left'
| 'right'
| 'stretch' | — | |
flexOrder | number | — | |
gridArea | string | — | |
gridColumn | string | — | |
gridRow | string | — | |
gridColumnStart | string | — | |
gridColumnEnd | string | — | |
gridRowStart | string | — | |
gridRowEnd | string | — | |
slot | string | "keyboard" | A slot to place the keyboard shortcut in. |
Spacing
| Name | Type | Default | Description |
margin | DimensionValue | — | |
marginTop | DimensionValue | — | |
marginLeft | DimensionValue | — | |
marginRight | DimensionValue | — | |
marginBottom | DimensionValue | — | |
marginStart | DimensionValue | — | |
marginEnd | DimensionValue | — | |
marginX | DimensionValue | — | |
marginY | DimensionValue | — |
Sizing
| Name | Type | Default | Description |
width | DimensionValue | — | |
minWidth | DimensionValue | — | |
maxWidth | DimensionValue | — | |
height | DimensionValue | — | |
minHeight | DimensionValue | — | |
maxHeight | DimensionValue | — |
Positioning
| Name | Type | Default | Description |
position | 'static'
| 'relative'
| 'absolute'
| 'fixed'
| 'sticky' | — | |
top | DimensionValue | — | |
bottom | DimensionValue | — | |
left | DimensionValue | — | |
right | DimensionValue | — | |
start | DimensionValue | — | |
end | DimensionValue | — | |
zIndex | number | — | |
isHidden | boolean | — |
Accessibility
| Name | Type | Default | Description |
id | string | — | The element's unique identifier. |