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.

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

Usage

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>;

API

PropTypeDescription
buttonTypeButtonTypeAdd a button type, which will come with its own icon. If adding an icon, this will be overridden
checkedbooleanTrue when the option button is selected
childrenReactNodeAdd the main text to the option button
classNamestringAdd a specific class to the option button
dataTeststringAdd a data-test tag for automated tests
descriptionstringAdd a description that is displayed below the text prop
disabledbooleanTrue if the option button should be disabled
htmlForstringAdd an htmlFor to the radio button of the option button. This will also be used as the htmlFor attribute on the label
iconReactNodeAdd an icon to the beginning of the option button. This overrides the icon that comes with buttonType
onChange(e: ChangeEvent<HTMLInputElement>) => voidAdd an onChange event to the option button
uncheckedbooleanTrue if the option button should have an unchecked appearance