Option Button

A option button enables users to toggle between two options.

Usage

Import the OptionButton and your preferred icons from “figBlocks”.
The OptionButton can display two distinct icons based on its state. These icons can be specified using the iconSvg , iconText , inactiveIconSvg , and inactiveIconText props.
Refer Icon component for further details.

<script>
	import { OptionButton } from 'figblocks';
	import { IconLinkBroken, IconLinkConnected } from 'figblocks/icons';
</script>

<OptionButton iconSvg={IconLinkConnected} inactiveIconSVG={IconLinkBroken} />

Active state

Pass the active prop to set the button state to active.

<OptionButton active iconSvg={IconLinkConnected} inactiveIconSVG={IconLinkBroken} />

Disabled state

Pass the disabled prop to disable the button.

<OptionButton disabled iconSvg={IconLinkConnected} inactiveIconSVG={IconLinkBroken} />

Inactive icon fallback

If an inactive icon is not provided, the active icon will be used for both states.

<OptionButton iconSvg={IconAdjust} />

Props

`active`	boolean	false	If true, the button state is set to active.
`disabled`	boolean	false	If true, the button will be disabled.
`iconSvg`	string	undefined	Refer Icon component.
`iconText`	string	undefined	Refer Icon component.
`inactiveIconSVG`	string	undefined	Refer Icon component.
`inactiveIconText`	string	undefined	Refer Icon component.
`class`	string	undefined	Custom CSS classname for styling

Events

on:click
on:focus
on:blur
on:mouseover
on:mouseenter
on:mouseleave