Style Props

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

Reference

The following table shows a list of every style prop and the properties within each group.

Margin and padding

import { Box } from "@hoverinc/design-system-react-web"

// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>

// You can also use custom values
<Box maxW="960px" mx="auto" />

// sets margin `8px` on all viewports and `12px` from the first breakpoint and up
<Box m={[2, 3]} />

Prop	CSS Property	Theme Key
`m`, `margin`	`margin`	`space`
`mt`, `marginTop`	`margin-top`	`space`
`mr`, `marginRight`	`margin-right`	`space`
`me`, `marginEnd`	`margin-inline-end`	`space`
`mb`, `marginBottom`	`margin-bottom`	`space`
`ml`, `marginLeft`	`margin-left`	`space`
`ms`, `marginStart`	`margin-inline-start`	`space`
`mx`, `marginX`	`margin-inline-start` + `margin-inline-end`	`space`
`my`, `marginY`	`margin-top` + `margin-bottom`	`space`
`p`, `padding`	`padding`	`space`
`pt`, `paddingTop`	`padding-top`	`space`
`pr`, `paddingRight`	`padding-right`	`space`
`pe`, `paddingEnd`	`padding-inline-end`	`space`
`pb`, `paddingBottom`	`padding-bottom`	`space`
`pl`, `paddingLeft`	`padding-left`	`space`
`ps`, `paddingStart`	`padding-inline-start`	`space`
`px`, `paddingX`	`padding-inline-start` + `padding-inline-end`	`space`
`py`, `paddingY`	`padding-top` + `padding-bottom`	`space`

For mx and px props, we use margin-inline-start and margin-inline-end to ensure the generated styles are RTL-friendly

Color and background color

import { Box } from "@hoverinc/design-system-react-web"

// picks up a nested color value using dot notation
// => `theme.colors.gray[50]`
<Box color='gray.50' />

// raw CSS color value
<Box color='#f00' />

// background colors
<Box bg='tomato' />

// verbose prop
<Box backgroundColor='tomato' />

Prop	CSS Property	Theme Key
`color`	`color`	`colors`
`bg`, `background`	`background`	`colors`
`bgColor`	`background-color`	`colors`
`opacity`	`opacity`	none

Gradient

import { Box, Text } from "@hoverinc/design-system-react-web"

// adding linear gradient and color transitions
<Box w="100%" h="200px" bgGradient="linear(to-t, green.200, pink.500)" />

// adding radial gradient and color transitions
<Box w="100%" h="200px" bgGradient="radial(gray.300, yellow.400, pink.200)" />

// adding the text gradient
<Text
  bgGradient="linear(to-l, #7928CA, #FF0080)"
  bgClip="text"
  fontSize="6xl"
  fontWeight="extrabold"
>
  Welcome to Chakra UI
</Text>

Prop	CSS Property	Theme Key
`bgGradient`	`background-image`	none
`bgClip`, `backgroundClip`	`background-clip`	none

Typography

import { Text } from "@hoverinc/design-system-react-web"

// font-size of `theme.fontSizes.md`
<Text fontSize="md" />

// font-size `32px`
<Text fontSize={32} />

// font-size `'2em'`
<Text fontSize='2em' />

// text-align `left` on all viewports and `center` from the first breakpoint and up
<Text textAlign={[ 'left', 'center' ]} />

Prop	CSS Property	Theme Key
`fontFamily`	`font-family`	`fonts`
`fontSize`	`font-size`	`fontSizes`
`fontWeight`	`font-weight`	`fontWeights`
`lineHeight`	`line-height`	`lineHeights`
`letterSpacing`	`letter-spacing`	`letterSpacings`
`textAlign`	`text-align`	none
`fontStyle`	`font-style`	none
`textTransform`	`text-transform`	none
`textDecoration`	`text-decoration`	none

Layout, width and height

import { Box } from "@hoverinc/design-system-react-web"

// verbose
<Box width="100%" height={32} />

// shorthand
<Box w="100%" h="32px" />

// use theme sizing
<Box boxSize="sm" />

// width `256px`
<Box w={256} />

// width `'40px'`
<Box w='40px' />

Prop	CSS Property	Theme Key
`w`, `width`	`width`	`sizes`
`h`, `height`	`height`	`sizes`
`minW`, `minWidth`	`min-width`	`sizes`
`maxW`, `maxWidth`	`max-width`	`sizes`
`minH`, `minHeight`	`min-height`	`sizes`
`maxH`, `maxHeight`	`max-height`	`sizes`
`boxSize`	`width`, `height`	`sizes`
`verticalAlign`	`vertical-align`	none
`overflow`	`overflow`	none
`overflowX`	`overflow-x`	none
`overflowY`	`overflow-y`	none

Display

import { Box } from '@hoverinc/design-system-react-web'

// hide the element on all viewports
<Box display='none' />

// hide the element by default, and show from 'md' up
<Box display={{ base: "none", md: "block" }} />

// shorthand
<Box hideBelow='md' />

// hide the element from 'md' up
<Box display={{ base: "block", md: "none" }} />

// shorthand
<Box hideFrom='md' />

Prop	CSS Property	Theme Key
`display`	`display`	none
`hideFrom`	`display` (at breakpoint)	`breakpoints`
`hideBelow`	`display` (at breakpoint)	`breakpoints`

Flexbox

import { Box, Flex } from "@hoverinc/design-system-react-web"

// verbose
<Box display="flex" alignItems="center" justifyContent="space-between">
  Box with Flex props
</Box>

// shorthand using the `Flex` component
<Flex align="center" justify="center">
  Flex Container
</Flex>

Note: Props in * will only work if you use the Flex component.

Prop	CSS Property	Theme Key
`gap`	`gap`	`space`
`rowGap`	`row-gap`	`space`
`columnGap`	`column-gap`	`space`
`alignItems`, *`align`	`align-items`	none
`alignContent`	`align-content`	none
`justifyItems`	`justify-items`	none
`justifyContent`, *`justify`	`justify-content`	none
`flexWrap`, *`wrap`	`flex-wrap`	none
`flexDirection`, `flexDir`, *`direction`	`flex-direction`	none
`flex`	`flex`	none
`flexGrow`	`flex-grow`	none
`flexShrink`	`flex-shrink`	none
`flexBasis`	`flex-basis`	none
`justifySelf`	`justify-self`	none
`alignSelf`	`align-self`	none
`order`	`order`	none

Grid Layout

import { Box, Grid } from "@hoverinc/design-system-react-web"

// verbose
<Box display="grid" gridGap={2} gridAutoFlow="row dense">
  Grid
</Box>

// shorthand using the `Grid` component
<Grid gap={2} autoFlow="row dense">
  Grid
</Grid>

Note: Props in * will only work if you use the Grid component.

Prop	CSS Property	Theme Key
`gridGap`, *`gap`	`grid-gap`	`space`
`gridRowGap`, *`rowGap`	`grid-row-gap`	`space`
`gridColumnGap`, *`columnGap`	`grid-column-gap`	`space`
`gridColumn`, *`column`	`grid-column`	none
`gridRow`, *`row`	`grid-row`	none
`gridArea`, *`area`	`grid-area`	none
`gridAutoFlow`, *`autoFlow`	`grid-auto-flow`	none
`gridAutoRows`, *`autoRows`	`grid-auto-rows`	none
`gridAutoColumns`, *`autoColumns`	`grid-auto-columns`	none
`gridTemplateRows`, *`templateRows`	`grid-template-rows`	none
`gridTemplateColumns`, *`templateColumns`	`grid-template-columns`	none
`gridTemplateAreas`, *`templateAreas`	`grid-template-areas`	none

Background

import { Box } from "@hoverinc/design-system-react-web"

// verbose
<Box
  backgroundImage="url('/images/kyuubi.png')"
  backgroundPosition="center"
  backgroundRepeat="no-repeat"
/>

// shorthand
<Box
  bgImage="url('/images/gaara.png')"
  bgPosition="center"
  bgRepeat="no-repeat"
/>

Prop	CSS Property	Theme Key
`bg`, `background`	`background`	none
`bgImage`, `backgroundImage`	`background-image`	none
`bgSize`, `backgroundSize`	`background-size`	none
`bgPosition`,`backgroundPosition`	`background-position`	none
`bgRepeat`,`backgroundRepeat`	`background-repeat`	none
`bgAttachment`,`backgroundAttachment`	`background-attachment`	none

Borders

<Box border='1px' borderColor='gray.200'>
  Card
</Box>

Prop	CSS Property	Theme Field
`border`	`border`	`borders`
`borderWidth`	`border-width`	`borderWidths`
`borderStyle`	`border-style`	`borderStyles`
`borderColor`	`border-color`	`colors`
`borderTop`	`border-top`	`borders`
`borderTopWidth`	`border-top-width`	`borderWidths`
`borderTopStyle`	`border-top-style`	`borderStyles`
`borderTopColor`	`border-top-color`	`colors`
`borderRight`	`border-right`	`borders`
`borderEnd`	`border-inline-end`	`borders`
`borderRightWidth`	`border-right-width`	`borderWidths`
`borderEndWidth`	`border-inline-end-width`	`borderWidths`
`borderRightStyle`	`border-right-style`	`borderStyles`
`borderEndStyle`	`border-inline-end-style`	`borderStyles`
`borderRightColor`	`border-right-color`	`colors`
`borderEndColor`	`border-inline-end-color`	`colors`
`borderBottom`	`border-bottom`	`borders`
`borderBottomWidth`	`border-bottom-width`	`borderWidths`
`borderBottomStyle`	`border-bottom-style`	`borderStyles`
`borderBottomColor`	`border-bottom-color`	`colors`
`borderLeft`	`border-left`	`borders`
`borderStart`	`border-inline-start`	`borders`
`borderLeftWidth`	`border-left-width`	`borderWidths`
`borderStartWidth`	`border-inline-start-width`	`borderWidths`
`borderLeftStyle`	`border-left-style`	`borderStyles`
`borderStartStyle`	`border-inline-start-style`	`borderStyles`
`borderLeftColor`	`border-left-color`	`colors`
`borderStartColor`	`border-inline-start-color`	`colors`
`borderX`	`border-left` , `border-right`	`borders`
`borderY`	`border-top` , `border-bottom`	`borders`

Border Radius

import { Button } from "@hoverinc/design-system-react-web"

// This button will have no right borderRadius
<Button borderRightRadius="0">Button 1</Button>

// This button will have no left borderRadius*/
<Button borderLeftRadius="0">Button 2</Button>

// top left and top right radius will be `theme.radii.md` => 4px
<Button borderTopRadius="md">Button 2</Button>

Prop	CSS Property	Theme Field
`borderRadius`	`border-radius`	`radii`
`borderTopLeftRadius`	`border-top-left-radius`	`radii`
`borderTopStartRadius`	`border-top-left-radius` in LTR, `border-top-right-radius` in RTL	`radii`
`borderTopRightRadius`	`border-top-right-radius`	`radii`
`borderTopEndRadius`	`border-top-right-radius` in LTR, `border-top-left-radius` in RTL	`radii`
`borderBottomRightRadius`	`border-bottom-right-radius`	`radii`
`borderBottomEndRadius`	`border-bottom-right-radius` in LTR, `border-bottom-left-radius` in RTL	`radii`
`borderBottomLeftRadius`	`border-bottom-left-radius`	`radii`
`borderBottomStartRadius`	`border-bottom-left-radius` in LTR, `border-bottom-left-radius` in RTL	`radii`
`borderTopRadius`	`border-top-left-radius` + `border-top-right-radius`	`radii`
`borderRightRadius`	`border-top-right-radius` + `border-bottom-right-radius`	`radii`
`borderEndRadius`	`border-top-right-radius` + `border-bottom-right-radius`	`radii`
`borderBottomRadius`	`border-bottom-left-radius` + `border-bottom-right-radius`	`radii`
`borderLeftRadius`	`border-top-left-radius` + `border-bottom-left-radius`	`radii`
`borderStartRadius`	`border-top-left-radius` + `border-bottom-left-radius`	`radii`

Position

import { Box } from "@hoverinc/design-system-react-web"

// verbose
<Box position="absolute">Cover</Box>

// shorthand
<Box pos="absolute">Cover</Box>
<Box pos="absolute" top="0" left="0">
  Absolute with top and left
</Box>
<Box pos="fixed" w="100%" zIndex={2}>
  Fixed with zIndex
</Box>

Prop	CSS Property	Theme Field
`pos`,`position`	`position`	none
`zIndex`	`z-index`	`zIndices`
`top`	`top`	`space`
`right`	`right`	`space`
`bottom`	`bottom`	`space`
`left`	`left`	`space`

Shadow

<SimpleGrid
  bg='gray.50'
  columns={{ sm: 2, md: 4 }}
  spacing='8'
  p='10'
  textAlign='center'
  rounded='lg'
  color='gray.400'
>
  <Box boxShadow='xs' p='6' rounded='md' bg='white'>
    xs
  </Box>
  <Box boxShadow='sm' p='6' rounded='md' bg='white'>
    sm
  </Box>
  <Box boxShadow='base' p='6' rounded='md' bg='white'>
    Base
  </Box>
  <Box boxShadow='md' p='6' rounded='md' bg='white'>
    md
  </Box>
  <Box boxShadow='lg' p='6' rounded='md' bg='white'>
    lg
  </Box>
  <Box boxShadow='xl' p='6' rounded='md' bg='white'>
    xl
  </Box>
  <Box boxShadow='2xl' p='6' rounded='md' bg='white'>
    2xl
  </Box>
  <Box boxShadow='dark-lg' p='6' rounded='md' bg='white'>
    Dark lg
  </Box>
  <Box boxShadow='outline' p='6' rounded='md' bg='white'>
    Outline
  </Box>
  <Box boxShadow='inner' p='6' rounded='md' bg='white'>
    Inner
  </Box>
</SimpleGrid>

<Text textShadow='1px 1px #ff0000' m='6'>
  Text with shadows
</Text>

Prop	CSS Property	Theme Field
`textShadow`	`text-shadow`	`shadows`
`shadow`, `boxShadow`	`box-shadow`	`shadows`

Filter

function Filters() {
  const basicBoxStyles = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    boxSize: '250px',
    color: 'white',
    textShadow: '0 0 20px black',
    fontWeight: 'bold',
    fontSize: '20px',
    px: 4,
    background:
      'url(https://picsum.photos/id/1080/200/300) center/cover no-repeat',
  }
  return (
    <Flex flexWrap='wrap' gap='24px' justifyContent='space-evenly'>
      {/* adding filter property to the element */}
      <Box sx={basicBoxStyles} filter='grayscale(80%)'>
        Box with Filter
      </Box>
      {/* adding blur property to the element */}
      <Box sx={basicBoxStyles} filter='auto' blur='2px'>
        Box with Blur
      </Box>
      {/* adding brightness property to the element */}
      <Box sx={basicBoxStyles} filter='auto' brightness='40%'>
        Box with Brightness
      </Box>
    </Flex>
  )
}

Note: To apply blur, brightness, contrast, hueRotate, invert, saturate props on the element, set filter prop value to "auto".

function BackdropFilters() {
  const outerBoxStyles = {
    boxSize: '250px',
    p: '10',
    background:
      'url(https://picsum.photos/id/1068/200/300) center/cover no-repeat',
  }

  const innerBoxStyles = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    textAlign: 'center',
    boxSize: 'full',
    color: 'white',
    textShadow: '0 0 20px black',
    fontWeight: 'bold',
    fontSize: '20px',
  }
  return (
    <Flex flexWrap='wrap' gap='24px' justifyContent='space-evenly'>
      {/* adding backdrop-filter property to the element */}
      <Box sx={outerBoxStyles}>
        <Box sx={innerBoxStyles} backdropFilter='invert(100%)'>
          Box with Backdrop Filter
        </Box>
      </Box>
      {/* adding backdrop-blur property to the element */}
      <Box sx={outerBoxStyles}>
        <Box sx={innerBoxStyles} backdropFilter='auto' backdropBlur='8px'>
          Box with Backdrop Blur
        </Box>
      </Box>
      {/* adding backdrop-contrast property to the element */}
      <Box sx={outerBoxStyles}>
        <Box sx={innerBoxStyles} backdropFilter='auto' backdropContrast='30%'>
          Box with Backdrop Contrast
        </Box>
      </Box>
    </Flex>
  )
}

🚨 backdrop-filter is not supported in Firefox. It can be enabled by the user, but it is suggested to design a component that looks good with and without this property.

Note: To apply backdropBlur, backdropBrightness, backdropContrast, backdropHueRotate, backdropInvert, backdropSaturate props on the element, set backdropFilter prop value to "auto".

Prop	CSS Property	Theme Field
`filter`	`filter`	none
`blur`	`filter`	`blur`
`brightness`	`filter`	none
`contrast`	`filter`	none
`hueRotate`	`filter`	none
`invert`	`filter`	none
`saturate`	`filter`	none
`dropShadow`	`filter`	`shadows`
`backdropFilter`	`backdrop-filter`	none
`backdropBlur`	`backdrop-filter`	`blur`
`backdropBrightness`	`backdrop-filter`	none
`backdropContrast`	`backdrop-filter`	none
`backdropHueRotate`	`backdrop-filter`	none
`backdropInvert`	`backdrop-filter`	none
`backdropSaturate`	`backdrop-filter`	none

Pseudo

import { Button } from "@hoverinc/design-system-react-web"

// :hover style
<Button
  colorScheme="teal"
  _hover={{
    background: "white",
    color: "teal.500",
  }}
>
  Hover me
</Button>

// apply :hover over parent element
<Box
  role="group"
>
  <Box
    _hover={{ fontWeight: 'semibold' }}
    _groupHover={{ color: 'tomato' }}
  >
  </Box>
</Box>

// add ::before pseudo element
// Note: the content value needs an extra set of quotes!
<Box
  _before={{ content: '"🙂"', display: 'inline-block', mr: '5px' }}
>
  A pseudo element
</Box>

Prop	CSS Property	Theme Field
`_hover`	`&:hover` `&[data-hover]`	none
`_active`	`&:active` `&[data-active]`	none
`_focus`	`&:focus` `&[data-focus]`	none
`_highlighted`	`&[data-highlighted]`	none
`_focusWithin`	`&:focus-within`	none
`_focusVisible`	`&:focus-visible`	none
`_disabled`	`&[disabled]` `&[aria-disabled=true]` `&[data-disabled]`	none
`_readOnly`	`&[aria-readonly=true]` `&[readonly]` `&[data-readonly]`	none
`_before`	`&::before`	none
`_after`	`&::after`	none
`_empty`	`&:empty`	none
`_expanded`	`&[aria-expanded=true]` `&[data-expanded]`	none
`_checked`	`&[aria-checked=true]` `&[data-checked]`	none
`_grabbed`	`&[aria-grabbed=true]` `&[data-grabbed]`	none
`_pressed`	`&[aria-pressed=true]` `&[data-pressed]`	none
`_invalid`	`&[aria-invalid=true]` `&[data-invalid]`	none
`_valid`	`&[data-valid]` `&[data-state=valid]`	none
`_loading`	`&[data-loading]` `&[aria-busy=true]`	none
`_selected`	`&[aria-selected=true]` `&[data-selected]`	none
`_hidden`	`&[hidden]` `&[data-hidden]`	none
`_autofill`	`&:-webkit-autofill`	none
`_even`	`&:nth-of-type(even)`	none
`_odd`	`&:nth-of-type(odd)`	none
`_first`	`&:first-of-type`	none
`_last`	`&:last-of-type`	none
`_notFirst`	`&:not(:first-of-type)`	none
`_notLast`	`&:not(:last-of-type)`	none
`_visited`	`&:visited`	none
`_activeLink`	`&[aria-current=page]`	none
`_activeStep`	`&[aria-current=step]`	none
`_indeterminate`	`&:indeterminate` `&[aria-checked=mixed]` `&[data-indeterminate]`	none
`_groupHover`	`[role=group]:hover &` `[role=group][data-hover] &` `[data-group]:hover &` `[data-group][data-hover] &` `.group:hover &` `.group[data-hover] &`	none
`_peerHover`	`[data-peer]:hover ~ &` `[data-peer][data-hover] ~ &` `.peer:hover ~ &` `.peer[data-hover] ~ &`	none
`_groupFocus`	`[role=group]:focus &` `[role=group][data-focus] &` `[data-group]:focus &` `[data-group][data-focus] &` `.group:focus &` `.group[data-focus] &`	none
`_peerFocus`	`[data-peer]:focus ~ &` `[data-peer][data-focus] ~ &` `.peer:focus ~ &` `.peer[data-focus] ~ &`	none
`_groupFocusVisible`	`[role=group]:focus-visible &` `[data-group]:focus-visible &` `.group:focus-visible &`	none
`_peerFocusVisible`	`[data-peer]:focus-visible ~ &` `.peer:focus-visible ~ &`	none
`_groupActive`	`[role=group]:active &` `[role=group][data-active] &` `[data-group]:active &` `[data-group][data-active] &` `.group:active &` `.group[data-active] &`	none
`_peerActive`	`[data-peer]:active ~ &` `[data-peer][data-active] ~ &` `.peer:active ~ &` `.peer[data-active] ~ &`	none
`_groupDisabled`	`[role=group]:disabled &` `[role=group][data-disabled] &` `[data-group]:disabled &` `[data-group][data-disabled] &` `.group:disabled &` `.group[data-disabled] &`	none
`_peerDisabled`	`[data-peer]:disabled ~ &` `[data-peer][data-disabled] ~ &` `.peer:disabled ~ &` `.peer[data-disabled] ~ &`	none
`_groupInvalid`	`[role=group]:invalid &` `[role=group][data-invalid] &` `[data-group]:invalid &` `[data-group][data-invalid] &` `.group:invalid &` `.group[data-invalid] &`	none
`_peerInvalid`	`[data-peer]:invalid ~ &` `[data-peer][data-invalid] ~ &` `.peer:invalid ~ &` `.peer[data-invalid] ~ &`	none
`_groupChecked`	`[role=group]:checked &` `[role=group][data-checked] &` `[data-group]:checked &` `[data-group][data-checked] &` `.group:checked &` `.group[data-checked] &`	none
`_peerChecked`	`[data-peer]:checked ~ &` `[data-peer][data-checked] ~ &` `.peer:checked ~ &` `.peer[data-checked] ~ &`	none
`_groupFocusWithin`	`[role=group]:focus-within &` `[data-group]:focus-within &` `.group:focus-within &`	none
`_peerFocusWithin`	`[data-peer]:focus-within ~ &` `.peer:focus-within ~ &`	none
`_peerPlaceholderShown`	`[data-peer]:placeholder-shown ~ &` `.peer:placeholder-shown ~ &`	none
`_placeholder`	`&::placeholder`	none
`_placeholderShown`	`&:placeholder-shown`	none
`_fullScreen`	`&:fullscreen`	none
`_selection`	`&::selection`	none
`_rtl`	`[dir=rtl] &` `&[dir=rtl]`	none
`_ltr`	`[dir=ltr] &` `&[dir=ltr]`	none
`_mediaDark`	`@media (prefers-color-scheme: dark)`	none
`_mediaReduceMotion`	`@media (prefers-reduced-motion: reduce)`	none
`_dark`	`.chakra-ui-dark &` `[data-theme=dark] &` `&[data-theme=dark]`	none
`_light`	`.chakra-ui-light &` `[data-theme=light] &` `&[data-theme=light]`	none

Other Props

Asides all the common style props listed above, all component will accept the following props:

Prop	CSS Property	Theme Field
`animation`	`animation`	none
`appearance`	`appearance`	none
`content`	`content`	none
`transform`	`transform`	none
`transformOrigin`	`transform-origin`	none
`visibility`	`visibility`	none
`whiteSpace`	`white-space`	none
`userSelect`	`user-select`	none
`pointerEvents`	`pointer-events`	none
`wordBreak`	`word-break`	none
`overflowWrap`	`overflow-wrap`	none
`textOverflow`	`text-overflow`	none
`boxSizing`	`box-sizing`	none
`cursor`	`cursor`	none
`resize`	`resize`	none
`transition`	`transition`	none
`objectFit`	`object-fit`	none
`objectPosition`	`object-position`	none
`float`	`float`	none
`fill`	`fill`	`colors`
`stroke`	`stroke`	`colors`
`outline`	`outline`	none

The `as` prop

The as prop is a feature in all of our components that allows you to pass an HTML tag or component to be rendered.

For example, say you are using a Button component, and you need to make it a link instead. You can compose a and Button like this:

<Button as='a' target='_blank' variant='outline' href='https://chakra-ui.com'>
  Hello
</Button>

This allows you to use all of the Button props and all of the a props without having to wrap the Button in an a component.

Motion

System Factory