Size

Utilities for setting the width and the height of an element.

React propsCSS Properties
size={size}width: {size};
height: {size};

Usage

Use size={value} to create a square.

size=1s

size=8

size=12

size=16

size=24

<x.div> <x.div size="1s" /> <x.div size={8} /> <x.div size={12} /> <x.div size={16} /> <x.div size={24} /> </x.div>

Responsive

To control the margin of an element at a specific breakpoint, use responsive object notation. For example, adding the property size={{ md: 2 }} to an element would apply the size={2} utility at medium screen sizes and above.

<x.div size={{ md: 2 }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Sizes scale

f you'd like to customize your values for width, height, min-width, min-height, max-width, max-height, all at once, use the theme.sizes section of your theme.

// theme.js export const theme = { sizes: { + sm: '8px', + md: '16px', + lg: '24px', + xl: '48px', }, }

Learn more about customizing the default theme in the theme customization documentation.

Edit this page on GitHub