Patterns

Learn useful patterns for working with components.

Use the asChild prop to change the underlying tag rendered by components with a singular root element.

<Text asChild>
  <h1>Hello world</h1>
</Text>

We ship a few handy shorthands which you can use as props on all components.

Property	Description
`m`	Applies `margin`
`mt`	Applies `margin-top`
`mr`	Applies `margin-right`
`mb`	Applies `margin-bottom`
`ml`	Applies `margin-left`
`mx`	Applies `margin-left` and `margin-right`
`my`	Applies `margin-top` and `margin-bottom`
`p`	Applies `padding`
`pt`	Applies `padding-top`
`pr`	Applies `padding-right`
`pb`	Applies `padding-bottom`
`pl`	Applies `padding-left`
`px`	Applies `padding-left` and `padding-right`
`py`	Applies `padding-top` and `padding-bottom`

Only values from the spacing scale are available as props. For example, to apply a margin-right value of 4px.

<Button mr="4">Submit<Button>;