# Button Component

## Standard

The Standard story shows uses the standard usage of the Button for the CIVIC platform. Button includes standard styling.

## Custom

The Custom story shows all possible properties that can be passed to Button component for customization.

- Color theme
- Transition
- Text label

## Custom Non-text Label

Use the Non-text Label (e.g., emojis or symbols) button if the label isn't readable by accesibile technologies, e.g. it is an emoji or other image. Use the aria-label attribute to give the button an accessible name. See https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html for more information about the aria-label.

This Non-text Label example shows how to use Button if the label isn't readable by accessible technologies, e.g. it is an emoji or other image. Use the aria-label attribute to give the button an accessible name. [More information about aria-label](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

This story allows the developer to edit these attributes of the Standard button:

- Non-text label
- aria-label