Text

Primitive typographic component, defaults to <p>. Use the as prop to set the correct HTML element independent from styling.

body

You know nothing, Jon Snow

caption

You know nothing, Jon Snow

hint

You know nothing, Jon Snow

label

You know nothing, Jon Snow

body

You know nothing, Jon Snow

caption

You know nothing, Jon Snow

hint

You know nothing, Jon Snow

label

You know nothing, Jon Snow

Component Props

Name	Description	Default
p	Padding on top, left, bottom and right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
ref	((instance: HTMLParagraphElement) => void) \| RefObject<HTMLParagraphElement>	-
bottom	The bottom CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
top	The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
variant	"body" \| "caption" \| "label" \| "hint"	body
m	Margin on top, left, bottom and right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
margin	Margin on top, left, bottom and right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
mt	Margin on top ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
marginTop	Margin on top ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
mr	Margin on right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
marginRight	Margin on right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
mb	Margin on bottom ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
marginBottom	Margin on bottom ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
ml	Margin on left ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
marginLeft	Margin on left ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
mx	Margin on left and right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
marginX	Margin on left and right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
my	Margin on top and bottom ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
marginY	Margin on top and bottom ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
padding	Padding on top, left, bottom and right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
pt	Padding on top ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
paddingTop	Padding on top ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
pr	Padding on right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
paddingRight	Padding on right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
pb	Padding on bottom ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
paddingBottom	Padding on bottom ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
pl	Padding on left ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
paddingLeft	Padding on left ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
px	Padding on left and right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
paddingX	Padding on left and right ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
py	Padding on top and bottom ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
paddingY	Padding on top and bottom ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
bg	The color utility parses a component's `color` and `bg` props and converts them into CSS declarations. By default the raw value of the prop is returned. Color palettes can be configured with the ThemeProvider to use keys as prop values, with support for dot notation. Array values are converted into responsive values. MDN Reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
backgroundColor	ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
opacity	The opacity CSS property sets the transparency of an element or the degree to which content behind an element is visible. MDN reference ResponsiveValue<GlobalsNumber, Required<Theme<string \| number>>>	-
width	The width utility parses a component's `width` prop and converts it into a CSS width declaration. Numbers from 0-1 are converted to percentage widths. Numbers greater than 1 are converted to pixel values. String values are passed as raw CSS values. And arrays are converted to responsive width styles. ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
height	The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
minWidth	The min-width CSS property sets the minimum width of an element. It prevents the used value of the width property from becoming smaller than the value specified for min-width. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
minHeight	The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
maxWidth	The max-width CSS property sets the maximum width of an element. It prevents the used value of the width property from becoming larger than the value specified by max-width. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
maxHeight	The max-height CSS property sets the maximum height of an element. It prevents the used value of the height property from becoming larger than the value specified for max-height. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
display	The display CSS property defines the display type of an element, which consists of the two basic qualities of how an element generates boxes — the outer display type defining how the box participates in flow layout, and the inner display type defining how the children of the box are laid out. MDN reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
verticalAlign	The vertical-align CSS property specifies sets vertical alignment of an inline or table-cell box. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
size	ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
overflow	The overflow CSS property sets what to do when an element's content is too big to fit in its block formatting context. It is a shorthand for overflow-x and overflow-y. MDN reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
overflowX	The overflow-x CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content. MDN reference ResponsiveValue<OverflowXProperty, Required<Theme<string \| number>>>	-
overflowY	The overflow-y CSS property sets what shows when content overflows a block-level element's top and bottom edges. This may be nothing, a scroll bar, or the overflow content. MDN reference ResponsiveValue<OverflowXProperty, Required<Theme<string \| number>>>	-
alignItems	The CSS align-items property sets the align-self value on all direct children as a group. The align-self property sets the alignment of an item within its containing block. In Flexbox it controls the alignment of items on the Cross Axis, in Grid Layout it controls the alignment of items on the Block Axis within their grid area. MDN reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
alignContent	The CSS align-content property sets how the browser distributes space between and around content items along the cross-axis of a flexbox container, and the main-axis of a grid container. MDN reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
justifyItems	The CSS justify-items property defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. MDN reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
justifyContent	The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. MDN reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
flexWrap	The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked. MDN reference ResponsiveValue<FlexWrapProperty, Required<Theme<string \| number>>>	-
flexDirection	The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction (normal or reversed). MDN reference ResponsiveValue<FlexDirectionProperty, Required<Theme<string \| number>>>	-
flex	The flex CSS property specifies how a flex item will grow or shrink so as to fit the space available in its flex container. This is a shorthand property that sets flex-grow, flex-shrink, and flex-basis. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
flexGrow	The flex-grow CSS property sets the flex grow factor of a flex item main size. It specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor). MDN reference ResponsiveValue<GlobalsNumber, Required<Theme<string \| number>>>	-
flexShrink	The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink. MDN reference ResponsiveValue<GlobalsNumber, Required<Theme<string \| number>>>	-
flexBasis	ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
justifySelf	The CSS justify-self property set the way a box is justified inside its alignment container along the appropriate axis. MDN reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
alignSelf	The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the item's cross-axis margin is set to auto, then align-self is ignored. In Grid layout align-self aligns the item inside the grid area. MDN reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
order	The order CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending order value and then by their source code order. MDN reference ResponsiveValue<GlobalsNumber, Required<Theme<string \| number>>>	-
border	The border CSS property sets an element's border. It's a shorthand for border-width, border-style, and border-color. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
borderX	ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
borderY	ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
borderWidth	The border-width shorthand CSS property sets the width of all sides of an element's border. MDN * reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderTopWidth	The border-top-width CSS property sets the width of the top border of an element. MDN * reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderBottomWidth	The border-bottom-width CSS property sets the width of the bottom border of an element. MDN * reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderLeftWidth	The border-left-width CSS property sets the width of the left border of an element. MDN * reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderRightWidth	The border-right-width CSS property sets the width of the right border of an element. MDN * reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderStyle	The border-style shorthand CSS property sets the style of all sides of an element's border. MDN * reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
borderTopStyle	The border-top-style CSS property sets the line style of an element's top border. MDN * reference ResponsiveValue<BorderTopStyleProperty, Required<Theme<string \| number>>>	-
borderBottomStyle	The border-bottom-style CSS property sets the line style of an element's bottom border. MDN * reference ResponsiveValue<BorderTopStyleProperty, Required<Theme<string \| number>>>	-
borderLeftStyle	The border-left-style CSS property sets the line style of an element's left border. MDN * reference ResponsiveValue<BorderTopStyleProperty, Required<Theme<string \| number>>>	-
borderRightStyle	The border-right-style CSS property sets the line style of an element's right border. MDN * reference ResponsiveValue<BorderTopStyleProperty, Required<Theme<string \| number>>>	-
borderColor	The border-color shorthand CSS property sets the color of all sides of an element's border. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderTopColor	The border-top-color CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties border-color or border-top. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderBottomColor	The border-bottom-color CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderLeftColor	The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderRightColor	The border-right-color CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties border-color or border-right. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderRadius	The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderTopLeftRadius	The border-top-left-radius CSS property rounds the top-left corner of an element. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderTopRightRadius	The border-top-right-radius CSS property rounds the top-right corner of an element. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderBottomLeftRadius	The border-bottom-left-radius CSS property rounds the bottom-left corner of an element. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderBottomRightRadius	The border-bottom-right-radius CSS property rounds the bottom-right corner of an element. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
borderTop	The border-top CSS property is a shorthand that sets the values of border-top-width, border-top-style, and border-top-color. These properties describe an element's top border. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
borderRight	The border-right CSS property is a shorthand that sets border-right-width, border-right-style, and border-right-color. These properties set an element's right border. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
borderBottom	The border-bottom CSS property sets an element's bottom border. It's a shorthand for border-bottom-width, border-bottom-style and border-bottom-color. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
borderLeft	The border-left CSS property is a shorthand that sets the values of border-left-width, border-left-style, and border-left-color. These properties describe an element's left border. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
position	The position CSS property specifies how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. MDN reference ResponsiveValue<PositionProperty, Required<Theme<string \| number>>>	-
zIndex	The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one. MDN reference ResponsiveValue<ZIndexProperty, Required<Theme<string \| number>>>	-
right	The right CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
left	The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements. MDN reference ResponsiveValue<string \| number, Required<Theme<string \| number>>>	-
fontFamily	ResponsiveValue<string, Required<Theme<string \| number>>>	-
fontSize	The fontSize utility parses a component's `fontSize` prop and converts it into a CSS font-size declaration. Numbers from 0-8 (or `theme.fontSizes.length`) are converted to values on the font size scale. Numbers greater than `theme.fontSizes.length` are converted to raw pixel values. String values are passed as raw CSS values. And array values are converted into responsive values. ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
fontWeight	The font-weight CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the font-family you are using. Some fonts are only available in normal and bold. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
lineHeight	The line-height CSS property sets the amount of space used for lines, such as in text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
letterSpacing	The letter-spacing CSS property sets the spacing behavior between text characters. MDN reference ResponsiveValue<string \| number \| symbol, Required<Theme<string \| number>>>	-
fontStyle	The font-style CSS property specifies whether a font should be styled with a normal, italic, or oblique face from its font-family. MDN reference ResponsiveValue<string, Required<Theme<string \| number>>>	-
textAlign	The text-align CSS property specifies the horizontal alignment of an inline or table-cell box. MDN reference ResponsiveValue<TextAlignProperty, Required<Theme<string \| number>>>	-
theme	any	-
as	never	-
forwardedAs	never	-

No Preview

Text

Component Props