Button Group

Button Group is used to group and align clickable elements, applying different visuals for different needs.

React

unsupported

Vue

released

Elements

unsupported

Android

unsupported

iOS

unsupported

Example

Usage

This component is only supported in Warp Vue at the moment. For a React equivalent that serves a similar purpose, use the Toggle in RadioButtons.

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks

Import

Use in entire app

import { ButtonGroup } from '@warp-ds/vue';
app.use(ButtonGroup);

Use in one component and special imports

You can import the component like so:

import { wButtonGroup, wButtonGroupItem } from '@warp-ds/vue';

or import it individually to optimize your JS bundle size by adding only the components you need:

import { wButtonGroup, wButtonGroupItem } from '@warp-ds/vue/button-group';

Syntax

  <w-button-group>
    <w-button-group-item :selected="props.selected">
      <w-clickable label radio v-model="radioModel" value="foo">Foo</w-clickable>
    </w-button-group-item>
    <w-button-group-item :selected="active('Radio') && radioModel === 'bar'">
      <w-clickable label radio v-model="radioModel" value="bar">Bar</w-clickable>
    </w-button-group-item>
    <w-button-group-item :selected="active('Radio') && radioModel === 'baz'">
      <w-clickable label radio v-model="radioModel" value="baz">Baz</w-clickable>
    </w-button-group-item>
  </w-button-group>

Props

ButtonGroup props

Optional Props

name	type	default	notes
outlined	boolean		Outlines the button-group
raised	boolean		Adds shadow to the button-group
vertical	boolean		Changes the orientation to vertical

Slots

name	use
default	where all the buttons go

ButtonGroupItem props

Optional Props

name	type	default	notes
selected	boolean		Used to give the item a selected appearance - e.g. when used with toggles

Slots

name	use
default	button content