Ring Width

Utilities for creating outline rings with box-shadows.

Usage

Use the ring={ringWidth} utilities to apply solid box-shadow of a specific thickness to an element. Rings are a semi-transparent blue color by default, similar to the default focus ring style in many systems.

<x.button ring={0}>ring-0</x.button>
<x.button ring={2}>ring-2</x.button>
<x.button ring>ring</x.button>
<x.button ring={4}>ring-4</x.button>

Ring utilities compose gracefully with regular boxShadow={shadow} utility and can be combined on the same element.

Focus rings

Add focus rings using ring={{ focus: ringWidth }} utility.

<x.button ring={{ focus: 4 }} ringColor={{ focus: 'emerald-500-a50' }}>
  Button
</x.button>

Inset rings

Use the ringInset utility to force a ring to render on the inside of an element instead of the outside. This can be useful for elements at the edge of the screen where part of the ring wouldn't be visible.

<x.button ring={4} ringColor="pink-300">
  Default
</x.button>
<x.button ring={4} ringColor="pink-300" ringInset>
  Inset
</x.button>

Responsive

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

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

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