Ring Color

Utilities for setting the color of outline rings.

React propsCSS Properties
ringColor={color}--x-ring-color: {color};


Use the ringColor={color} utility to set the color of an outline ring.

<x.button ring={4} ringColor="indigo-300"> Button </x.button>

Changing opacity

Use color alpha variants to choose another opacity.

<x.button ring={4} ringColor="amber-500-a50"> Button </x.button>


To control outline ring colors at a specific breakpoint, use responsive object notation. For example, adding the property ringColor={{ md: "indigo-300" }} to an element would apply the ringColor="indigo-300" utility at medium screen sizes and above.

<x.div ringColor={{ md: 'indigo-300' }}>{/* ... */}</x.div>

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

Edit this page on GitHub