{"id":21294086,"url":"https://github.com/alaskaairlines/auro-button","last_synced_at":"2026-01-29T02:23:33.780Z","repository":{"id":37957459,"uuid":"177681333","full_name":"AlaskaAirlines/auro-button","owner":"AlaskaAirlines","description":"HTML custom element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality","archived":false,"fork":false,"pushed_at":"2025-06-18T14:18:15.000Z","size":3753,"stargazers_count":5,"open_issues_count":7,"forks_count":11,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-06-24T00:44:04.056Z","etag":null,"topics":["auro","custom-element","design-system"],"latest_commit_sha":null,"homepage":"https://auro.alaskaair.com/components/auro/button","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AlaskaAirlines.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-03-25T23:40:42.000Z","updated_at":"2025-06-18T14:18:20.000Z","dependencies_parsed_at":"2024-02-20T03:32:34.081Z","dependency_job_id":"b275472b-8765-41e9-9c59-a76681344fd6","html_url":"https://github.com/AlaskaAirlines/auro-button","commit_stats":{"total_commits":351,"total_committers":19,"mean_commits":"18.473684210526315","dds":0.6581196581196581,"last_synced_commit":"10a1208a0a6b11af3c7a8fab66944b81905a1480"},"previous_names":["alaskaairlines/orionstatelesscomponents__ods-button"],"tags_count":112,"template":false,"template_full_name":null,"purl":"pkg:github/AlaskaAirlines/auro-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AlaskaAirlines","download_url":"https://codeload.github.com/AlaskaAirlines/auro-button/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AlaskaAirlines%2Fauro-button/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262016767,"owners_count":23245573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["auro","custom-element","design-system"],"created_at":"2024-11-21T13:57:41.778Z","updated_at":"2026-01-29T02:23:33.687Z","avatar_url":"https://github.com/AlaskaAirlines.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\nThe README.md file is a compiled document. No edits should be made directly to this file.\n\nREADME.md is created by running `npm run build:docs`.\n\nThis file is generated based on a template fetched from\n`https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_updated_paths.md`\nand copied to `./componentDocs/README.md` each time the the docs are compiled.\n\nThe following sections are editable by making changes to the following files:\n\n| SECTION                | DESCRIPTION                                       | FILE LOCATION                       |\n|------------------------|---------------------------------------------------|-------------------------------------|\n| Description            | Description of the component                      | `./docs/partials/description.md`    |\n| Use Cases              | Examples for when to use this component           | `./docs/partials/useCases.md`       |\n| Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |\n| Component Example Code | HTML sample code of the components use            | `./apiExamples/basic.html`          |\n--\u003e\r\n\r\n# Button\n\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/description.md --\u003e\n`\u003cauro-button\u003e` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose being a clickable element to trigger a specific action.\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md --\u003e\n\u003c!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. --\u003e\r\n\r\n## Responsive support\n\n`\u003cauro-button\u003e` 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).\n\nBeyond that breakpoint `\u003cauro-button\u003e` will assume the width of the content or a min-width of `8.75rem`, which ever is greater.\n\nIf the desired appearance of the `\u003cauro-button\u003e` is to be placed in the reverse direction of natural content, then the attributes of `responsive` and `reverse` are needed on the `\u003cauro-button\u003e` element.\r\n\r\n## Multi button support\n\nWhen the UI requires the use of multiple buttons within the same space, with the use of the [Auro Web Core Style Sheets](https://alaskaairlines.github.io/WebCoreStyleSheets/#utility-auro-css-#{$scope}.auro_containedButtons), and the `auro_containedButtons`.\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## UI development browser support\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) --\u003e\nFor the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Install\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentInstall_esm.md) --\u003e\n[![Build Status](https://img.shields.io/github/actions/workflow/status/AlaskaAirlines/auro-button/testPublish.yml?style=for-the-badge)](https://github.com/AlaskaAirlines/auro-button/actions/workflows/testPublish.yml)\n[![See it on NPM!](https://img.shields.io/npm/v/@aurodesignsystem/auro-button?style=for-the-badge\u0026color=orange)](https://www.npmjs.com/package/@aurodesignsystem/auro-button)\n[![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-button?color=blue\u0026style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)\n![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)\r\n\r\n```shell\n$ npm i @aurodesignsystem/auro-button\n```\n\nInstalling as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Design Token CSS Custom Property dependency\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) --\u003e\nThe use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Define dependency in project component\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImportDescription.md) --\u003e\nDefining the component dependency within each component that is using the `\u003cauro-button\u003e` component.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/componentImport.md) --\u003e\r\n\r\n```js\nimport \"@aurodesignsystem/auro-button\";\n```\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n**Reference component in HTML**\n\u003c!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) --\u003e\n\u003c!-- The below code snippet is automatically added from ./apiExamples/basic.html --\u003e\r\n\r\n```html\n\u003cauro-button\u003ePrimary\u003c/auro-button\u003e\n\u003cauro-button variant=\"secondary\"\u003eSecondary\u003c/auro-button\u003e\n\u003cauro-button variant=\"tertiary\"\u003eTertiary\u003c/auro-button\u003e\n\u003cauro-button variant=\"ghost\"\u003eGhost\u003c/auro-button\u003e\n\u003cauro-button variant=\"flat\"\u003eFlat\u003c/auro-button\u003e\r\n```\r\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Install bundled assets from CDN\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleInstallDescription.md) --\u003e\nIn cases where the project is not able to process JS assets, there are pre-processed assets available for use. See -- `auro-button__bundled.js` for modern browsers. Legacy browsers such as IE11 are no longer supported.\n\n**WARNING!** When installing into your application environment, DO NOT use `@latest` for the requested version. Risks include unknown MAJOR version releases and instant adoption of any new features and possible bugs without developer knowledge. The `@latest` wildcard should NEVER be used for production customer-facing applications. You have been warned.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Bundle example code\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/usage/bundleUseModBrowsers.md) --\u003e\r\n\r\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@/dist/auro-classic/CSSCustomProperties.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@/dist/bundled/essentials.css\" /\u003e\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@11.2.1/dist/auro-button__bundled.js\" type=\"module\"\u003e\u003c/script\u003e\r\n```\r\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## auro-button use cases\n\n\u003c!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) --\u003e\n\u003c!-- The below content is automatically added from ./docs/partials/useCases.md --\u003e\nThe auro-button element should be used in situations where users may:\n\n* submit a form\n* begin a new task\n* trigger a new UI element to appear to the page\n* specificy a new or next step in a process\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## API Code Examples\r\n\r\n### Default auro-button\n\n\u003c!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) --\u003e\n\u003c!-- The below code snippet is automatically added from ./apiExamples/basic.html --\u003e\r\n\r\n```html\n\u003cauro-button\u003ePrimary\u003c/auro-button\u003e\n\u003cauro-button variant=\"secondary\"\u003eSecondary\u003c/auro-button\u003e\n\u003cauro-button variant=\"tertiary\"\u003eTertiary\u003c/auro-button\u003e\n\u003cauro-button variant=\"ghost\"\u003eGhost\u003c/auro-button\u003e\n\u003cauro-button variant=\"flat\"\u003eFlat\u003c/auro-button\u003e\r\n```\r\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n## Development\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/developmentDescription.md) --\u003e\nIn order to develop against this project, if you are not part of the core team, you will be required to fork the project prior to submitting a pull request.\n\nPlease be sure to review the [contribution guidelines](https://auro.alaskaair.com/contributing) for this project. Please make sure to **pay special attention** to the **conventional commits** section of the document.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Start development environment\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/localhost.md) --\u003e\nOnce the project has been cloned to your local resource and you have installed all the dependencies you will need to open a shell session to run the **dev server**.\n\n```shell\n$ npm run dev\n```\n\nOpen [localhost:8000](http://localhost:8000/)\n\nIf running separate sessions is preferred, please run the following commands in individual terminal shells.\n\n```shell\n$ npm run build:watch\n\n$ npm run serve\n```\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### API generation\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/api.md) --\u003e\nThe custom element API file is generated in the build and committed back to the repo with a version change. If the API doc has changed without a version change, author's are to run `npm run build:api` to generate the doc and commit to version control.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Testing\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/testing.md) --\u003e\nAutomated tests are required for every Auro component. See `.\\test\\auro-button.test.js` for the tests for this component. Run `npm test` to run the tests and check code coverage. Tests must pass and meet a certain coverage threshold to commit. See [the testing documentation](https://auro.alaskaair.com/support/tests) for more details.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\r\n\r\n### Bundled assets\n\n\u003c!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/bundles.md) --\u003e\nBundled assets are only generated in the remote and not merged back to this repo. To review and/or test a bundled asset locally, run `$ npm run bundler` to generate assets.\n\n\u003c!-- AURO-GENERATED-CONTENT:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaskaairlines%2Fauro-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falaskaairlines%2Fauro-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falaskaairlines%2Fauro-button/lists"}