SvARIA Playground
SvARIA Button Component
SvARIA Button Docs
All SvARIA components must be installed through the NPM package by running the command below in Node.js:
npminstallsvaria-toolkit
Tailwind CSS styling is enabled by default, if you have it installed on your project. You can override this with your own class names, or by using the style property for inline styling. For more information on using Tailwind Classes, check out the Tailwind CSS website.
Properties
Below you'll find the properties available on the Button component. Some of these are required for the component to appear or function, while others may have a default value that does not need to be changed at all. Feel free to experiment with the props in the sandbox above if you want to see how your changes will affect your implementation.
- content (optional): Provides the content for the button. If not specified this will default to 'This is a button'
- ariaLabel (optional): Provides an accessible aria-label for the button. If not specified, this will default to the content of the button
- id (optional): Uniquely identifies the button
- className (optional): Provides a class to the button. Tailwind can be use to adjust styling here
- type (optional): This can be 'button', 'submit' or 'reset'. If not specified this will default to 'button'
- style (optional): Allows you to use inline styling for all the labels. e.g. style='color:orange'