VBtnToggle API

Props

name	type	default
`base-color`	string	undefined
Sets the color of component when not focused.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`direction`	'vertical' \| 'horizontal'	'horizontal'
Control how children components are arranged - in a row or column.
`disabled`	boolean	false
Puts all children components into a disabled state.
`divided`	boolean	false
Add dividers between children v-btn components.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`mandatory`	boolean \| 'force'	false
Forces at least one item to always be selected (if available).
`max`	number	undefined
Sets a maximum number of selections that can be made.
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`multiple`	boolean	false
Allows one to select multiple items.
`rounded`	string \| number \| boolean	undefined
Round edge buttons.
`selected-class`	string	undefined
Configure the active CSS class applied when an item is selected.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes the component’s border-radius.
`variant`	'text' \| 'flat' \| 'elevated' \| 'tonal' \| 'outlined' \| 'plain'	'elevated'
Applies a distinct style to the component.

Events

name	type
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  select: (id: string, value: boolean) => void
  isSelected: (id: string) => boolean
  selected: Ref<readonly string[], readonly string[]>
  prev: () => void
  next: () => void
}

`default`
The default Vue slot.

Exposed

() => void

() => void

(id: string, value: boolean) => void

`next`
Activates the next button.
`prev`
Activates the previous button.
`select`
Selects a button by index, the second parameter is a boolean to indicate if the button should be selected or not.

SASS Variables

name	default
`$btn-toggle-selected-opacity`	map.get(settings.$states, 'activated')

#VBtnToggle API

VBtnToggle API