Skip to content
AtlasOSFramework API
Browse the docs

AtlasFocusRing

The keyboard focus ring every Atlas control shows: a magenta-violet outline with a gap, only for keyboard focus.

AtlasFocusRing is a 2 px magenta-violet (AtlasStyle.focus) outline with a 2 px gap outside the control's shape, shown only when focus came from the keyboard. It fades in over durationShort and grows slightly into place; under reduced motion it only appears. Put it inside the control's background and give it the shape's radius plus the gap.

Example

AtlasButton {
    id: control
    background: Rectangle {
        radius: AtlasStyle.radiusSmall
        AtlasFocusRing { radius: parent.radius + gap; shown: control.visualFocus }
    }
}

It is decorative: screen readers skip it. It is a Rectangle, so its other properties (radius) work as usual.

Properties

Name Type Default Description
gap real 2 How far outside the parent the ring sits.
shown bool false Whether the ring shows. Usually the control's visualFocus.