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 | — | |
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 |
role | string | — | Defines the type of user interface element. |
id | string | — | The element's unique identifier. |
tabIndex | number | — | Indicates whether an element is focusable, allows or prevents them from being sequentially focusable, and determines their relative ordering for sequential focus navigation. |
aria-label | string | — | Defines a string value that labels the current element. |
aria-labelledby | string | — | Identifies the element (or elements) that labels the current element. |
aria-describedby | string | — | Identifies the element (or elements) that describes the object. |
aria-controls | string | — | Identifies the element (or elements) whose contents or presence are controlled by the current element. |
aria-owns | string | — | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. |
aria-hidden | boolean | 'false' | 'true' | — | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. |