ButtonIcon 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 button icons according to style guide conventions.

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

API

| prop | type | required | default | explanation | |-----------|--------|----------|---------|--------------| | className | string | no | "" | 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 | | variant | enum("solid", "outlined", "text", "ghost") | no | "solid" | Determines the button style variant | | shape | enum("default", "circle", "square") | no | "default" | Determines the button shape variant | | size | enum("tiny", "small", "medium", "large") | no | "small" | Determines the button size variant (use classOverrides for custom sizes) | | loading | boolean | no | false | Determines button loading state | | disabled | boolean | no | false | Determines button disabled state | | label | string | yes | "" | Adds aria label | | icon | React element | no | undefined | Determines the button icon | | onClick | function | no | () => {} | Event handler for onclick events | | 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