@bdt-component-library/button-icon

ButtonIcon component

Usage no npm install needed!

<script type="module">
  import bdtComponentLibraryButtonIcon from 'https://cdn.skypack.dev/@bdt-component-library/button-icon';
</script>

README

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.

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