Aurora Button
Layered gradient button with a luminous rim, a directional shadow and a blended hover bloom. Vue port of MicroKit UI's Aurora Download Button.
Default
Hover it for the bloom and a small lift, press it and it sinks. The icon and label go in the default slot.
Colors
Twenty presets through colorVariant. Deep hues carry white text, orange through sky carry their own 950 shade, and muted follows the theme. Every one keeps the label at 4.5:1 or better against the lightest point under it, sheen included. blue starts from the MicroKit pair, deepened just enough to pass.
Secondary
muted is the quiet partner for a second action. It is built from the theme's muted, background and foreground tokens, so it follows light and dark: a pale pill with dark text on light pages, a grey one with light text on dark pages, each with a hairline ring and a softer shadow and sheen than the colored presets. Flip the preview theme to compare.
Custom colors
Pass color for the deep end of the gradient and highlight for the top left. Leave highlight out and it is mixed from color. Text stays white unless you pass foreground, which a light color needs.
Sizes
sm, default and lg. An icon without a size class follows the button.
Download buttons
One button per platform, each on its own palette.
Link
Pass to and it renders a NuxtLink. External URLs open in a new tab.
Playground
Pick a preset or mix your own. The snippet lists only what differs from the defaults.
API Reference
AuroraButton
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "default" | "lg" | "default" | Height 32, 40 or 48px, with padding, radius and icon size to match. |
colorVariant | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "slate" | "zinc" | "muted" | "blue" | Hand-tuned palette. Deep hues carry white text, orange through sky their own 950 shade, muted follows the theme tokens. color and highlight override it. |
color | string | — | Deep end of the gradient, any CSS color. Overrides colorVariant. |
highlight | string | — | Top-left end of the gradient. Mixed from color when unset. |
foreground | string | — | Text and icon color. Custom colors default to white; a light color needs a dark one. |
to | string | — | Renders a NuxtLink. External URLs get target _blank and rel noopener. |
target | string | — | Link target. Overrides the external default. |
as | string | "button" | Element to render when to is empty. |
disabled | boolean | false | Disables the button, or marks the link aria-disabled. |
| Slot | Description |
|---|---|
default | Icon and label. An svg without a size class gets 16 or 20px from size. |
Accessibility
Keyboard shortcuts and ARIA behavior.
- Renders a native button, or a link when to is set, so Enter and Space behave as usual.
- Every preset keeps its label at 4.5:1 or better at rest and 4:1 or better under the hover bloom, measured at the lightest point behind the text.
- The rim and the bloom are aria-hidden with pointer-events none. Only the content is read and clicked.
- Keyboard focus draws the ring outline 4px out and gives the same lift and bloom as hover.
- With prefers-reduced-motion: reduce the lift and the bloom switch instantly instead of easing.