We've updated our documenation to align with our other frameworks. Our new documenation will
live here and these pages will be removed.
Buttons allow users to take actions within a product. Denali buttons come in a variety of styles, sizes, and states.
By default, our buttons appear darker when active. However, you can force the active state appearance by adding the .is-active modifier to your <button>. Alternatively, Denali buttons have a greyed out appearance when disabled. To disable a button, add the disabled attribute to your <button>.
When using icons with buttons, reduce redundancy by adding aria-hidden="true" and set tabindex="-1" will make sure only textual link is read and focused on by screenreader.
Buttons are available in default, medium, and small sizes. The default button size is automatically built into our button styles. Implement medium and small buttons by adding an .is-medium or .is-small class to the <button> tag.