| Table of Contents |
|---|
Description
Segmented buttons Selectors display a set of icons or text buttons in a row as a single element. Segmented buttons They allow users to choose one or more options out of a predefined range of available options.
...
Usage & Behavior
A segmented button selector is commonly used:
As an alternative to Drop-down menuMenu or Radio buttonsButtons.
As a switch between different views.
As a toggle between two or more content sections within the same panel.
General guidelines
Structure
A segmented button selector consists of:
A button group of equal options.
Individual options presented as either text or an icon.
Button width:
When using icons, the buttons should be of equal width.
When using text, it is recommended that the
buttons should be of equal width
where possible.
Default State
The default selection is always usually the first option in a segmented button the group.
Content
Button labels need to be as short as possible, and should ideally be only one word.
Alternatively, icons can be used to replace button labels.
States
State | Icon | Text | Comment |
|---|---|---|---|
Regular |  |  | |
Hover |  |  | |
Active |  |  | |
Selected |  |  | |
Selected, Hover |  |  | |
Disabled |  |  |
Interaction
Clicking an unselected option in the group should:
...
change that option to Selected.
...
Focused |  |  | |
Focused, Hover |  |  | |
Focused, Active |  |  | |
Focused, Disabled |  |  |
Interaction
Single Selection
Clicking an unselected option in the group should:
change that option to Selected.
automatically deselect the previously-selected button, which is then viewed as Regular.
Multiple Selection
Clicking an option will select it regardless to other selected items.
Clicking the option again deselects it.
In this mode the user can deselect all items.
Best practices
Use:
When when there are only 5 or fewer options.
Where where there’s enough room to fit the options within the UI.
When when you want to switch between alternative views of the same content.
When when the options are closely related in context or content.
Don’t use:
If if there are more than 5 option → use a Drop-down menuMenu or Radio buttonsButtons.
If if there is limited room to fit the options within the UI → use a Drop-down menuMenu.
If if the options aren't closely related in context or content → use Tabsa collection of Buttons (toolbar).
General
Try to avoid using a selector for only two options.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Single selection works in the same way as a group of Radio Buttons.
Multi-selection works in the same way as a group of Checkboxes.
Responsive design
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
Where a selector exceeds the container width, the width of each button may be reduced. All buttons should remain an equal size.
The buttons may not wrap onto multiple rows.
Where button labels no longer fit, one of the following may happen. The labels can be either:
truncated with an ellipsis, with the full label shown in a tooltip on hover, or
replaced with icons.
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Selector Icon Single Select <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre').toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-light btn-sm active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
<i class="icon-package"></i>
</label>
<label class="btn btn-outline-light btn-sm">
<input type="radio" name="options" id="option2" autocomplete="off">
<i class="icon-format"></i>
</label>
<label class="btn btn-outline-light btn-sm">
<input type="radio" name="options" id="option3" autocomplete="off">
<i class="icon-print"></i>
</label>
<label class="btn btn-outline-light btn-sm">
<input type="radio" name="options" id="option4" autocomplete="off">
<i class="icon-settings"></i>
</label>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-light btn-sm active">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
<i class="icon-package"></i>
</label>
<label class="btn btn-outline-light btn-sm">
<input type="radio" name="options" id="option2" autocomplete="off">
<i class="icon-format"></i>
</label>
<label class="btn btn-outline-light btn-sm">
<input type="radio" name="options" id="option3" autocomplete="off">
<i class="icon-print"></i>
</label>
<label class="btn btn-outline-light btn-sm">
<input type="radio" name="options" id="option4" autocomplete="off">
<i class="icon-settings"></i>
</label>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-light btn-sm disabled">
<input type="radio" name="options2" id="option5" autocomplete="off" disabled checked>
<i class="icon-package"></i>
</label>
<label class="btn btn-outline-light btn-sm disabled">
<input type="radio" name="options2" id="option6" autocomplete="off" disabled>
<i class="icon-format"></i>
</label>
<label class="btn btn-outline-light btn-sm disabled">
<input type="radio" name="options2" id="option7" autocomplete="off" disabled>
<i class="icon-print"></i>
</label>
<label class="btn btn-outline-light btn-sm disabled">
<input type="radio" name="options2" id="option8" autocomplete="off" disabled>
<i class="icon-settings"></i>
</label>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-light btn-sm disabled">
<input type="radio" name="options" id="option1" autocomplete="off" checked>
<i class="icon-package"></i>
</label>
<label class="btn btn-outline-light btn-sm disabled">
<input type="radio" name="options" id="option2" autocomplete="off">
<i class="icon-format"></i>
</label>
<label class="btn btn-outline-light btn-sm disabled">
<input type="radio" name="options" id="option3" autocomplete="off">
<i class="icon-print"></i>
</label>
<label class="btn btn-outline-light btn-sm disabled">
<input type="radio" name="options" id="option4" autocomplete="off">
<i class="icon-settings"></i>
</label>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">Selector Icon Multiple Select</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
<i class="icon-package"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
<i class="icon-format"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
<i class="icon-print"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
<i class="icon-settings"></i>
</button>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
<i class="icon-package"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
<i class="icon-format"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
<i class="icon-print"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
<i class="icon-settings"></i>
</button>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
<i class="icon-package"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
<i class="icon-format"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
<i class="icon-print"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
<i class="icon-settings"></i>
</button>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
<i class="icon-package"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
<i class="icon-format"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
<i class="icon-print"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
<i class="icon-settings"></i>
</button>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">Selector Single Select</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-light btn-sm btn-fixed-width active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Item 1
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width">
<input type="radio" name="options" id="option2" autocomplete="off"> Item 2
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width">
<input type="radio" name="options" id="option3" autocomplete="off"> Item 3
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width">
<input type="radio" name="options" id="option4" autocomplete="off"> Item 4
</label>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-light btn-sm btn-fixed-width active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Item 1
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width">
<input type="radio" name="options" id="option2" autocomplete="off"> Item 2
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width">
<input type="radio" name="options" id="option3" autocomplete="off"> Item 3
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width">
<input type="radio" name="options" id="option4" autocomplete="off"> Item 4
</label>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
<input type="radio" name="options2" id="option5" autocomplete="off" disabled checked> Item 1
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
<input type="radio" name="options2" id="option6" autocomplete="off" disabled> Item 2
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
<input type="radio" name="options2" id="option7" autocomplete="off" disabled> Item 3
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
<input type="radio" name="options2" id="option8" autocomplete="off" disabled> Item 4
</label>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Item 1
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
<input type="radio" name="options" id="option2" autocomplete="off"> Item 2
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
<input type="radio" name="options" id="option3" autocomplete="off"> Item 3
</label>
<label class="btn btn-outline-light btn-sm btn-fixed-width disabled">
<input type="radio" name="options" id="option4" autocomplete="off"> Item 4
</label>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<div class="card">
<div class="card-header">Selector Multiple Select</div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
Item 1
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
Item 2
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
Item 3
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
Item 4
</button>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
Item 1
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
Item 2
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
Item 3
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off">
Item 4
</button>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
Item 1
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
Item 2
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
Item 3
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
Item 4
</button>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="btn-group btn-group-sm">
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
Item 1
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
Item 2
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
Item 3
</button>
<button type="button" class="btn btn-outline-light btn-sm btn-fixed-width" data-toggle="button" aria-pressed="false" autocomplete="off" disabled>
Item 4
</button>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div> |