Heading
Heading is used to create various levels of typographic hierarchies.
| install | yarn add @react-spectrum/typography |
|---|---|
| version | 3.0.0-alpha.1 |
| usage | import {Heading} from '@react-spectrum/typography' |
Example#
<Heading>Edit</Heading>Content#
Heading is a Typography component which is a child to other components. Heading provides hierarchical information, like a title within a Dialog, based on placement within a parent component. Based on the component Heading is used within, it gets Spectrum styling and may have a preassigned slot for positioning. By virtue of its name, the Heading component provides semantic meaning in the context they are placed. Examples of their usage in Dialog and IllustratedMessage. It is important to note that the Heading component accepts any renderable node, not just strings.
See the MDN docs for more information.
Props#
| Name | Type | Default | Description |
children | ReactNode | — | Heading content |
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 | "heading" | A slot to place the heading 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. |