8x8 Oxygen - ToggleButton

Installation

$ yarn add @8x8/oxygen-toggle-button

$ npm install @8x8/oxygen-toggle-button

Usage

import ToggleButton, { ToggleButtonGroup } from '@8x8/oxygen-toggle-button';

<ToggleButton
  label="Example label"
  value="value0"
  name="value0name"
  isChecked
/>

Props

ToggleButton

| Name | Type | Default | Description | | -------------------------- | --------------------------------------------------------------------------------------------------------------------------- | ----------------- | ----------------------------------------------------------------------------------- | | theme | Partial<ToggleButtonTheme> | | Overrides applied on top of the light or dark settings resolved by OxygenProvider | | testId | string | 'TOGGLE_BUTTON' | Toggle-button test id | | id | string | autogenerated | Value for id input attribute and htmlFor label attribute | | label | node | null | Specifies the label content for the toggle-button input (text or custom component) | | value | oneOfType([ number, string, bool, shape({ id: string.isRequired, }),]) | '' | Toggle-button input value | | name | string | undefined | Specifies the name prop for the toggle-button input | | infoBoxText | node | undefined | Shows info icon and renders text inside Tooltip | | infoBoxButtonLabel | string | undefined | Adds accessible aria-label to info button | | isChecked | bool | false | Specifies if the toggle-button is checked | | isDisabled | bool | false | Specifies if the toggle-button is disabled | | isIndeterminate | bool | false | Specifies if the toggle-button has indeterminate state | | showLabelTooltipOnOverflow | bool | true | Show action tooltip on label overflow | | onBlur | func | noop | Synthetic event | | onChange | func | noop | Callback for the toggle-button input change | | onFocus | func | noop | Synthetic event |

ToggleButtonGroup

| Name | Type | Default | Description | | ------------ | --------------------------------- | ------- | ----------------------------------------------------------------------------------- | | theme | Partial<ToggleButtonGroupTheme> | | Overrides applied on top of the light or dark settings resolved by OxygenProvider | | children | oneOfType([array, node]) | null | Toggle-button inputs to be rendered | | isHorizontal | bool | false | Specifies if the group should be displayed horizontally or vertically |