A button group of equal options.
Individual options presented as either text or an icon.
Button width:
- When using icons, the
options
- buttons should be of equal width.
- When using text, it is recommended that the buttons should be of equal width
and prominence
- where possible.
Default State

The default selection is usually the first option in the group.
...
Alternatively, icons can be used to replace button labels.
States

State	Icon	Text
Regular	Image Modified	Image Modified
Hover	Image Modified	Image Modified
Active	Image Modified	Image Modified
Selected	Image Modified	Image Modified
Disabled	Image Modified	Image Modified
Focused	Image Modified	Image Modified
Focused, Hover	Image Modified	Image Modified
Focused, Active	Image Modified	Image Modified
Focused, Disabled	Image Modified	Image Modified
Interaction

Single Selection
...
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
https://zpl.io/V4AZnjN	Image Modified
https://zpl.io/2Eyk8XD	Image Modified
Code

Html macro
sanitize	false
<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>
Version	Old Version 30	New Version 31
Changes made by	Carlie Bradshaw	Ayelet Servi
Saved on	Sept 07, 2023	Dec 12, 2023
Content Comparison

Versions Compared

Key

Default State

States

Interaction

Design

Code
