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

Design System

Some props are mapped to our styling guide, instead of being traditional css props.

Prop	Description	Value
level	Perceived depth on UI (Cards or Shaded areas)	-2 ... 3
borderWidth	Width on borders	normal , thick
borderStyle	Border style	solid , dashed

Margin and padding

<Box m={2}>One</Box>
<Box maxW="960px" mx="auto">Two</Box>
content_copy
Copy

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	margin-inline-start + margin-inline-end	space
my	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	padding-inline-start + padding-inline-end	space
py	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 "@passfort/ui"

// 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' />
content_copy
Copy

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

Typography

// 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' ]} />
content_copy
Copy

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 "@passfort/ui"

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

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

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

// width \`50%\`
<Box w={1/2} />

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

// width \`40px\`
<Box w='40px' />
content_copy
Copy

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
d, display	display	none
boxSize	width, height	sizes
verticalAlign	vertical-align	none
overflow	overflow	none
overflowX	overflowX	none
overflowY	overflowY	none

Flexbox

// 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>
content_copy
Copy

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

Prop	CSS Property	Theme Key
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

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

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

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

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

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

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="N200">
  Card
</Box>
content_copy
Copy

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

// 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>
content_copy
Copy

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

// 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>
content_copy
Copy

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="N0">
    xs
  </Box>
  <Box boxShadow="sm" p="6" rounded="md" bg="white">
    sm
  </Box>
  <Box boxShadow="base" p="6" rounded="md" bg="N0">
    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>
content_copy
Copy

Pseudo

// :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>
content_copy
Copy

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] &	none
_groupFocus	[role=group]:focus &, [role=group][data-focus] &	none
_groupActive	[role=group]:active &, [role=group][data-active] &	none
_groupDisabled	[role=group]:disabled &, [role=group][data-disabled] &	none
_groupInvalid	[role=group][data-invalid] &	none
_groupChecked	[role=group][data-checked] &	none
_placeholder	::placeholder	none
_fullScreen	:fullscreen	none
_selection	::selection	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
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" label="a Button"></Button>
<Button as="a" target="_blank" variant="outline" label="a Button"></Button>
content_copy
Copy
live example

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.