# Aura

> A light that runs around the border of the one button or card a screen most needs you to see.

## Anatomy

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.

Upgrade

### Pro plan

Unlimited projects and priority support.

```
<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.

Dual

Rainbow

Glow

```
<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.

### Faster and wider

A 4px tertiary ring that turns every two seconds.

```
<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.

| Token | Default |
| --- | --- |
| `--md-comp-aura-color` | `--md-sys-color-primary` |
| `--md-comp-aura-color-2` | `--md-sys-color-tertiary`; used by `dual` |
| `--md-comp-aura-width` | 2px |
| `--md-comp-aura-shape` | 12px; 9999px around a button |
| `--md-comp-aura-duration` | 4s |