Skip to content
Rebass
GitHub

Variants

All Rebass components accept a variant prop, which allows you to define stylistic variations in your theme and apply the styles on a per-element basis.

For example, with the following defined in the theme object:

// example theme with variants
export default {
colors: {
text: 'black',
background: 'white',
primary: 'tomato',
},
shadows: {
card: '0 0 4px rgba(0, 0, 0, 0.125)',
},
variants: {
card: {
p: 2,
bg: 'background',
boxShadow: 'card',
borderRadius: 2,
},
badge: {
display: 'inline-block',
p: 1,
color: 'white',
bg: 'primary',
borderRadius: 2,
}
},
}

The Box component can use a variant style to render with preset card or badge styles.

Card
Badge
Live Demo

By default, Rebass components will use style objects defined in theme.variants. The Text and Heading components use a custom theme.text object, and Button uses theme.buttons.

ComponentTheme KeyDefault Variant
BoxvariantsN/A
FlexvariantsN/A
TexttextN/A
Headingtextheading
Linkvariantslink
Buttonbuttonsprimary
ImagevariantsN/A
Cardvariantscard

Any object in your theme can be used as a variant, and the values use dot notation for deeply nested values.

// example variant with dot notation
<Box variant='some.deeply.nested.object' />
Edit this page on GitHub
Previous:
Theming
Next:
Extending