@bdt-component-library/button NPM

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