Ring Color

Utilities for setting the color of outline rings.

Usage

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>

Responsive

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.