# Button The Auro Design System fully supports a wide range of buttons styles and use cases. The following examples illustrate common button uses followed up by code examples. See [install instructions](https://www.alaskaair.com/components/auro/button/install) for more information as how to install and full API for the `auro-button` Auro base element. Illustrated in this example is a stand-alone use of `auro-button`. ## Button 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 on the page * specify a new or next step in a process ## Buttons are not Hyperlinks In cases were the action of the button would not fit the criteria above, it is most likely a Hyperlink. In that situation it is recommended that the [auro-hyperlink](https://www.alaskaair.com/components/auro/hyperlink) element be used. ## Default types
Primary Primary
See code ```html Primary Primary ```
Secondary Secondary
See code ```html Secondary Secondary ```
Tertiary Tertiary
See code ```html Tertiary Tertiary ``` For default spacing of elements in a row, use the [.auro_containedButtons](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_containedButtons) predefined selector in the [WC Style Sheets](https://auro.alaskaair.com/webcorestylesheets) lib.
Primary Secondary Tertiary
See code ```html
Primary Secondary Tertiary
``` ## Slim style Use the `slim` attribute with the `auro-button` element for a slim style with less padding. The slim style is used to establish the lowest level of hierarchy. Slim buttons have the least emphasis and significance on a page.
Primary Secondary Tertiary
See code ```html
Primary Secondary Tertiary
```
Activate WiFi Previous action Love this ...
See code ```html Activate WiFi Previous action Love this ... ``` ## Icon support Adding icons to the auro-button component is as easy as nesting any other HTML. The [auro-icon component](https://www.alaskaair.com/components/auro/icon) has access to all the icons listed in the [Auro Icons library](https://www.alaskaair.com/icons/usage) for quick and easy use. Be sure to use the `customColor` attribute on the auro-icon component to allow colors set in your parent element to pass through to the icon.
Activate WiFi Previous action Love this ...
See code ```html Activate WiFi Previous action Love this ... ``` #### Icon only button Use the `iconOnly` attribute with the `auro-button` element for a style specific to having only an `auro-icon` as the button's content. Be sure to also use the `customColor` and `customSize` attributes on the `auro-icon` component to allow colors set in your parent element to pass through to the icon. **Recommended**: We strongly encourage the users of the icon only `auro-button` to use the `aria-label` attribute. Without this attribute, the screenreaders will not properly describe the button content to it's users.
See code ```html ``` #### Icon only button - Slim Use the `slim` attribute along with `iconOnly` attribute on the `auro-button` element for a slimmer icon only button with less padding.
See code ```html ``` ## Fluid In the following example see how the `fluid` attributes alters the shape of the button to be full width of its parent container.
Primary Secondary Tertiary
See code ```html Primary Secondary Tertiary ``` ## Loading State Use the `loading` attribute to alter the content to teh shimmering dots to alert the user that the button/form is in an active state. The `loading` attribute will also place the element in a disabled state to keep the user from re-submitting an action.
Primary Secondary Tertiary
See code ```html Primary Secondary Tertiary ```
Primary Secondary Tertiary
See code ```html Primary Secondary Tertiary ``` ## onDark These examples illustrate the core button types and a `disabled` state on dark backgrounds using the `onDark` attribute.
Primary Primary
See code ```html Primary Primary ```
Secondary Secondary
See code ```html Secondary Secondary ```
Tertiary Tertiary
See code ```html Tertiary Tertiary ``` ## Pass a function to button These examples illustrate a common use case where a user will want to pass a function into a button to support a click event. See the code examples for how this is achieved.
Primary Primary Primary
See code ```html Primary Primary Primary ``` ## Do's and don'ts Don't combine `disabled` and `loading` attributes on any single instance of `auro-button`. An `auro-button` with `loading` *is* affectively a disabled instance. There is no need for both.
Primary
See code ```html Primary ```
Primary
See code ```html Primary ```