# Button The `` element creates interactive buttons for triggering actions in your application. ## Responsive support `` is responsive by default. The button will assume 100% of the width of its container for views less than [auro_breakpoint--sm](https://alaskaairlines.github.io/WebCoreStyleSheets/#responsive-mixin-auro_breakpoint--sm). Beyond that breakpoint `` will assume the width of the content or a min-width of `8.75rem`, which ever is greater. If the desired appearance of the `` is to be placed in the reverse direction of natural content, then the attributes of `responsive` and `reverse` are needed on the `` element. ## Use Cases The auro-button element should be used in situations where users may: * submit a form * begin a new task * trigger a new UI element to appear to the page * specify a new or next step in a process ## Install [![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-button/release.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-button/actions/workflows/release.yml) [![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-button?style=for-the-badge&color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-button) [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-button?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0) ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge) ```shell $ npm i @aurodesignsystem/auro-button ``` ### Define Dependency in Project Defining the dependency within each project that is using the `` component. ```js import "@aurodesignsystem/auro-button"; ``` ### Use CDN In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported. ```html ``` ## Basic Example ```html Primary Secondary Tertiary Ghost ``` ## Custom Component Registration for Version Management There are two key parts to every Auro component: 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. When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered 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), you can manually register the class under a custom element name to avoid conflicts. You can do this by importing only the component class and using the `register(name)` method with a unique name: ```js // Import the class only import { AuroButton } from '@aurodesignsystem/auro-button/class'; // Register with a custom name if desired AuroButton.register('custom-button'); ``` This will create a new custom element `` that behaves exactly like ``, allowing both to coexist on the same page without interfering with each other.
Primary Secondary Tertiary
See code ```html Primary Secondary Tertiary ```