Button

An accessible button that lets people take an action, such as submitting a form, starting a task, or moving to the next step in a flow.

Width

<auro-button> is as wide as its content at every screen size. To make it fill the full width of its container, such as on small screens, set fluid.

Use cases

Use <auro-button> when people need to:

• Submit a form.
• Start a new task.
• Open a new part of the interface, such as a dialog.
• Move to the next step in a process.

Install

$ npm i @aurodesignsystem/auro-button

Define dependency in project

Import the component in each project that uses <auro-button>.

import "@aurodesignsystem/auro-button";

Use CDN

If your project can't process JS assets, use the pre-processed assets. Legacy browsers, such as IE11, aren't supported.

<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm"></script>

Basic example

<auro-button>Primary</auro-button>
<auro-button variant="secondary">Secondary</auro-button>
<auro-button variant="tertiary">Tertiary</auro-button>
<auro-button variant="ghost">Ghost</auro-button>

Custom component registration for version management

Every Auro component has two key parts: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.

Installing the component as described in the Install section imports the class and registers the component globally for you.

However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), register the class manually under a custom element name to avoid conflicts.

To do this, import only the component class and call the register(name) method with a unique name:

// Import the class only
import { AuroButton } from '@aurodesignsystem/auro-button/class';

// Register with a custom name if desired
AuroButton.register('custom-button');

This creates a new custom element <custom-button> that behaves exactly like <auro-button>, allowing both to coexist on the same page without interfering with each other.

<custom-button>Primary</custom-button>
<custom-button variant="secondary">Secondary</custom-button>
<custom-button variant="tertiary">Tertiary</custom-button>