Skip to main contents

Focus ring

import '@vollowx/seele/m3/focus-ring/focus-ring.js';
<button style="position: relative">
  <md-focus-ring></md-focus-ring>
  Le Button
</button>

Focus ring is an Attachable element as well, checkout Ripple to see its usage.

M3FocusRing

Properties

name description
inward Reflected boolean; ring appears inside the element

CSS Custom Properties

name description
--md-focus-ring-width
--md-focus-ring-active-width
--md-focus-ring-color
--md-focus-ring-duration Animation duration
--md-focus-ring-shape
--md-focus-ring-shape-start-start
--md-focus-ring-shape-start-end
--md-focus-ring-shape-end-start
--md-focus-ring-shape-end-end
--md-focus-ring-inward-offset
--md-focus-ring-outward-offset