Button Group
Button Group is used to group and align clickable elements, applying different visuals for different needs.
React
unsupportedVue
releasedElements
unsupportedAndroid
unsupportediOS
unsupportedExample
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
js
import { ButtonGroup } from "@warp-ds/vue";
app.use(ButtonGroup);
Use in one component and special imports
js
import { wButtonGroup, wButtonGroupItem } from "@warp-ds/vue";
Syntax
vue
<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 |