@bdt-component-library/button

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
danger	boolean	no	false	Determines if the button is of the danger/destructive style ("solid" and "inverted" look the same)
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
inlineIcon	React element OR false	no	false	Allows inline button icon
iconPosition	enum("leading", "trailing")	no	undefined	Determine positioning of icon element
onClick	function	no	undefined	Event handler for onclick events
onClick	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