Toggle-Button

TkToggleButtonGroup is a component that allows you to create a group of toggle buttons.

React

import { TkToggleButtonGroup, TkToggleButton } from '@takeoff-ui/react'

Vue

import { TkToggleButtonGroup, TkToggleButton } from '@takeoff-ui/vue'

Angular

import { TkToggleButtonGroup, TkToggleButton } from '@takeoff-ui/angular'

Playground

Preview

Generated Code

<TkToggleButtonGroup
  type="divided"
  direction="horizontal"
>
  <TkToggleButton label="Option 1" value="1" />
  <TkToggleButton label="Option 2" value="2" />
  <TkToggleButton label="Option 3" value="3" />
</TkToggleButtonGroup>

<TkToggleButtonGroup
  type="divided"
  direction="horizontal"
>
  <TkToggleButton label="Option 1" value="1" />
  <TkToggleButton label="Option 2" value="2" />
  <TkToggleButton label="Option 3" value="3" />
</TkToggleButtonGroup>

<tk-toggle-button-group
  type="divided"
  direction="horizontal"
>
  <tk-toggle-button label="Option 1" value="1" />
  <tk-toggle-button label="Option 2" value="2" />
  <tk-toggle-button label="Option 3" value="3" />
</tk-toggle-button-group>

Controls

Type:

Direction:

Group Types

This demo visualizes the types of the toggle button group.

View Code

React

Vue

Angular

Group Direction

This demo visualizes the direction of the toggle button group.

View Code

React

Vue

Angular

Group Rounded

This demo visualizes the rounded of the toggle button group.

View Code

React

Vue

Angular

Button Variants

This demo visualizes the variants of the toggle button.

View Code

React

Vue

Angular

Button Types

This demo visualizes the types of the toggle button.

View Code

React

Vue

Angular

Button Sizes

This demo visualizes the sizes of the toggle button.

View Code

React

Vue

Angular

Button Disabled

This demo visualizes the disabled state of the toggle button.

View Code

React

<TkToggleButtonGroup value="1" type="basic" onTkChange={(e) => setValue(e.detail)}>
    <TkToggleButton  type="outlined" variant="neutral" key="1" value="1" icon={{ name: 'bolt', fill: true }} iconPosition="right" size="large" label="One"/>
    <TkToggleButton  type="outlined" variant="neutral" key="2" value="2" icon={{ name: 'bolt', fill: true }} iconPosition="right" size="large" label="Two"/>
    <TkToggleButton  type="outlined" variant="neutral" key="3" value="3" icon={{ name: 'bolt', fill: true }} iconPosition="right" size="large" label="Three"/>
   </TkToggleButtonGroup >

Vue

<TkToggleButtonGroup :value="1" type="basic" @tk-change="(e) => toggleButtonDemo.value = e.detail">
    <TkToggleButton  type="outlined" variant="neutral" :key="1" :value="1" :icon="{ name: 'bolt', fill: true }" iconPosition="right" size="large" label="One"/>
    <TkToggleButton  type="outlined" variant="neutral" :key="2" :value="2" :icon="{ name: 'bolt', fill: true }" iconPosition="right" size="large" label="Two"/>
    <TkToggleButton  type="outlined" variant="neutral" :key="3" :value="3" :icon="{ name: 'bolt', fill: true }" iconPosition="right" size="large" label="Three"/>
  </TkToggleButtonGroup>

Angular

Button Icon Position

This demo visualizes the icon position of the toggle button.

View Code

React

Vue

Angular

Toggle Button Group API

Props

Name	Type	Default	Description
	string	null	Sets the data-testid attribute on the root container element.
	"horizontal", "vertical"	'horizontal'	The direction of the toggle button group.
	boolean	false	The value of the rounded toggle button group.
	"basic", "divided", "light"	'basic'	The value type of the toggle button group.
	any	null	The value of the selected toggle button.

Events

Name	Description
tk-change	Emitted when the selected value changes.

Slots

Name	Description
	The default slot

Toggle Button API

Props

Name	Type	Default	Description
	string	null	Sets the data-testid attribute on the root container element.
	boolean	null	Disables the button, preventing user interaction.
	IIconOptions, IMultiIconOptions, string	null	Specifies a material icon name to be displayed.
	"left", "right"	'left'	Defines the position of the icon.
	string	''	Label text displayed inside the button.
	boolean	null	Makes the button round with an icon-only style.
	boolean	false	Whether the button is selected.
	"base", "large", "small"	'base'	Sets size for the component.
	"filled", "filled-light", "outlined", "raised", "text"	'filled'	The value of the type toggle button.
	any	null	The value of the toggle button.
	"neutral", "primary"	'neutral'	Determines the button's variant for different styles.

Events

Name	Description
tk-toggle	Emitted when the toggle button is toggled.