stylish
Draws a focus indicator ring around this component while the interactionSource reports a focus interaction.
Implements the web "focus-visible ring" pattern used by shadcn/ui and Radix UI for keyboard accessibility: an interactive element gains a clearly visible outline only when it is focused, making keyboard navigation discoverable without adding permanent visual noise. When the source does not report focus, the modifier has no visual effect.
The ring is drawn with drawWithContent — the component's content is drawn first, then the ring on top — so it remains visible over any container color or state layer. The ring follows shape (which should match the component's container shape): rounded shapes get a rounded stroke using the shape's outline corner radius, and non-rounded shapes fall back to a rectangular stroke.
Combine this with Modifier.stylishStateLayer on custom androidx.compose.material3.Surface-based components (such as the Stylish chip, FAB, and icon-button families); components that wrap Material 3 widgets already receive M3's internal focus indicator and should not add this modifier again.
Parameters
The source to observe for focus interactions. Typically the same source hoisted through the component's interactionSource parameter (or an internally remembered one).
The shape the ring is drawn with. Defaults to RectangleShape; pass the container's shape (e.g. CircleShape) for non-rectangular surfaces.
The color of the ring. Defaults to MaterialTheme.colorScheme.primary.
The stroke width of the ring in dp. Defaults to 2.dp — subtle enough not to compete with the component, visible enough for keyboard navigation.