Aura

An .aura wraps one element and runs a light around its border. Use it on the button, card or panel a screen most needs the user to notice, such as the plan you recommend or the action that finishes a setup.

Keep it to one aura per screen. Two auras compete for attention, and neither one stands out. The ring is 2px and sits just outside the wrapped element. Reduced motion stops the turning and keeps the ring.

<div class="aura">
  <button class="filled">Upgrade</button>
</div>

<div class="aura">
  <article>
    <h3>Pro plan</h3>
    <p>Unlimited projects and priority support.</p>
  </article>
</div>

Styles

dual sends two lights around the ring, primary and tertiary, on opposite sides. rainbow turns the whole hue wheel. glow draws a blurred halo behind the element in place of a ring. Give that element an opaque container, such as a filled button or a card.

<div class="aura dual"><button class="tonal">Dual</button></div>
<div class="aura rainbow"><button class="outlined">Rainbow</button></div>
<div class="aura glow"><button class="filled">Glow</button></div>

Color, width and speed

Set the tokens on the .aura. The ring takes its corners from --md-comp-aura-shape. It is 12px to match a card, and fully rounded when it wraps a button. Set it to the corner size of anything else you wrap.

<div class="aura" style="--md-comp-aura-color: var(--md-sys-color-tertiary);
                         --md-comp-aura-width: 4px;
                         --md-comp-aura-duration: 2s">
  <article>…</article>
</div>

Accessibility

Say in the text that something is recommended, for example with a "Recommended" badge or heading. Do not rely on the aura for that. The light is decoration. A pseudo-element draws it, so the wrapper adds nothing to the accessibility tree. The wrapped element keeps its own name and role. In forced colors the ring is a solid Highlight outline.

Tokens

Override these on the .aura, or on a parent.