Button Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of buttons according to style guide conventions.

• https://zeroheight.com/990ea04ab/p/64014e-buttons

API

| prop | type | required | default | explanation | |-----------|--------|----------|---------|--------------| | children | React node | yes | n/a | The component/text to render inside the button | | className | string | no | n/a | Adds an optional classname to the component | | classOverrides | { shape: string, size: string, variant: string } | no | {} | Allows specifying classes to override other specific classes in the component | | type | enum("button", "submit", "reset") | no | n/a | Changes the button type | | id | string | no | "button" | Adds an optional id to the component | | variant | enum("solid", "outlined", "text", "inverted") | no | "solid" | Changes the variation style of the button | | status | enum("danger", "warning", "success", "informational") | no | "informational" | Changes the color of the "inverted" variant for specific uses | | size | enum("default", "compact") | no | "default" | Determines the size of the button. | | ariaLabel | string | no | n/a | Adds an optional aria label | | disabled | boolean | no | undefined | Determines if the button is in the disabled state | | loading | boolean | no | false | Determines if the button is in the loading state | | leadingIcon | React element OR false | no | false | Allows and handles leading button icon | | trailingIcon | React element OR false | no | false | Allows and handles trailing button icon | | onClick | function | no | undefined | Event handler for onclick events | | onBlur | function | no | undefined | Event handler for onblur events | | inputRef | any | no | undefined | Allows adding a react ref | | fullWidth | boolean | no | false | Determines if the button spans full width or not | | testId | string | no | n/a | Adds an optional data-testid for testing purposes | ariaControls | string | no | n/a | Adds an optional aria-controls for situations where the button has an effect on another component | ariaExpanded | boolean | no | n/a | Adds an optional aria-expanded for situations where the button makes previously hidden content visible