Toggle Button

BsToggleButton is a group of buttons with toggle capability. It is primarily used to visualize options with different approaches, such as selecting options, switching views, or sorting elements.

Overview

BsToggleButton component shares the same style variants as BsButton. And if you like Google Material Design 3 - Segmented Button style, you can choose a style variant that meet the Material Design 3 - Segmented Button specifications.

BsToggleButton component is like HTML5 <input> element. This means that you can add attributes like readonly, or disabled and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property. This is useful to control or maintain the model-value property.

Updated on v2.0.0

What are you drinking?

Normal state

TeaCoffeeBeer

Readonly state

TeaCoffeeBeer

Disabled state

TeaCoffeeBeer

IMPORTANT

• The <bs-button-toggle> tag still works, but has been deprecated since v2.0.0.
• Never assign a datasource to multiple <bs-toggle-button>. It may cause a bug or duplicate ID attribute.

TIP

Any MDBootstrap Color variants and Material Color variants can be applied to the color property.

Checked Icon

With the help of slot icon you can add dynamic checked icon.

Added since v2.0.1

Favorite Drink

TeaCoffeeBeer

Multiple Selection

BsToggleButton also support multiple selection mode. Use and define the multiple property explicitly to enable multiple selection mode.

Favorite Drink

TeaCoffeeBeer

Favorite Coffee

AmericanoEspressoCappuccino

Style Variants

You can style the <bs-toggle-button> component to your own preference or use a style variant based on Google Material Design 3 specifications. Example below show various built-in style variants and demonstrate how to put an icon inside the <bs-toggle-button> and change the icon dynamically like a segmented buttons behaves.

Updated on v2.0.1

How is the weather today?

Filled

SunnyRainHeavy Rain

Filled Elevated

SunnyRainHeavy Rain

Filled Tonal

SunnyRainHeavy Rain

Outlined

SunnyRainHeavy Rain

Flat

SunnyRainHeavy Rain

Combination

How is the weather today?

Filled Round

SunnyRainHeavy Rain

Filled Rectangle

SunnyRainHeavy Rain

Filled Round Tonal

SunnyRainHeavy Rain

Outlined Round

SunnyRainHeavy Rain

Flat Round

SunnyRainHeavy Rain

INFO

Since Vue MDBootstrap v2.1.0, Google Material Icons are replaced with Google Material Symbols.

Usage Example

The following is an example that demonstrate more advanced use of the <bs-toggle-button>.

Your Downloads

SongsAlbumsPodcasts

21st Century Strangers

68 MB

New Name

72 MB

Not Me

58 MB

Mutter

68 MB

True Love

68 MB

CSS Variables

The component css variables inherited from BsButton css variables.

Added since v2.0.0

API Reference

Property	Type	Default	Description
disabled	Boolean	false	The component state.
color	String	'default'	The component color appearance. Any MDBootstrap Color variants and Material Color variants can be used.
flat	Boolean	false	Enable flat toggle button style.
icon-position	String	'left'	The icon placement. Valid values are: left (before text), right (after text).
id	String		Sets the component ID. This property value is auto generate.
items	TInputOptionItem[]		Collection of input item properties.
model-value v-model	String/Number/Array		Value monitored by v-model that represents the selected value. v2.0.0
multiple	Boolean	false	Enable multiple selection mode. The default is single selection mode.
name	String		The <input> element name.
outlined	Boolean	false	Enable outlined toggle button style.
pill	Boolean	true	Enable rounded-pill toggle button style. v2.0.0
raised	Boolean	false	Enable elevated toggle button style.
readonly	Boolean	false	The component state.
rounded	Boolean	false	Enable rounded toggle button style. v2.0.0
size	String		Create the component with predefined size. Valid values are: xs, sm, lg.
toggle-color	String		The selected button color (optional). Any MDBootstrap Color variants and Material Color variants can be used.
tonal	Boolean	false	Enable filled tonal toggle button style. v2.0.4

Name	Arguments	Description
update:model-value	( value:String/Number/Boolean/Array)	Used to update the model-value property. v2.0.0

Name	Arguments	Description
icon	( item:TInputOptionItem)	The outlet slot used to place custom icon. v2.0.1
label	( item:TInputOptionItem)	The outlet slot used to place custom label. v2.0.1

TInputOptionItem

The Input item has properties as described below:

Property	Type	Description
value required	String/Number/Boolean	The item value.
label required	String	The item label.
id	String	Html <input> element ID.
name	String	Html <input> element name. It is used when multiple is true.
disabled	Boolean	Html <input> element state.
readonly	Boolean	Html <input> element state.
icon	String	The icon to display inside the button. Updated on v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix will take precedence over iconVariant property.
iconFlip	String	Flip the icon. Valid values are: horizontal, vertical, both.
iconPulse	Boolean	Apply pulse animation to the icon.
iconSize	Number	Render the icon at predefined size in pixel.
iconSpin	Boolean	Apply spin animation to the icon.
iconRotation	Number	Rotate the icon. Valid values are: 90, 180, 270.
iconVariant	String	Use predefined icon style variant. Valid values are: outlined, rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. v2.1.0