Quick nav

OptionButton

The option button is a component that will often be used in a group of multiple option buttons and will play a role similar to the radio buttons.

Version 0.2.2

Installation

To install @igloo-ui/option-button in your project, you will need to run the following command using npm:

npm install @igloo-ui/option-button

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/option-button

Then to use the component in your code just import it!

import OptionButton from '@igloo-ui/option-button';

<OptionButton htmlFor="textBtn" name="buttonType" buttonType="text">
  Text
</OptionButton>;

Prop	Type	Default	Description
`buttonType`	ButtonType		Add a button type, which will come with its own icon. If adding an icon, this will be overridden
`checked`	boolean	-	True when the option button is selected
`children`	ReactNode	-	Add the main text to the option button
`className`	string	-	Add a specific class to the option button
`dataTest`	string	-	Add a data-test tag for automated tests
`description`	string	-	Add a description that is displayed below the text prop
`disabled`	boolean	-	True if the option button should be disabled
`htmlFor`	string	-	Add an htmlFor to the radio button of the option button. This will also be used as the htmlFor attribute on the label
`icon`	ReactNode	-	Add an icon to the beginning of the option button. This overrides the icon that comes with buttonType
`onChange`	(e: ChangeEvent<HTMLInputElement>) => void	-	Add an onChange event to the option button
`unchecked`	boolean	-	True if the option button should have an unchecked appearance