@bdt-component-library/button-icon NPM

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