Grupo de botones

Ejemplo


<div class="btn-group shadow-sm" role="group" aria-label="Basic example">

    <button type="button" class="btn btn-white">Left</button>

    <button type="button" class="btn btn-white">Middle</button>

    <button type="button" class="btn btn-white">Right</button>

</div>


<div class="btn-group" role="group" aria-label="Basic example">

    <button type="button" class="btn btn-{light, secondary ...}">Left</button>

    <button type="button" class="btn btn-{light, secondary ...}">Middle</button>

    <button type="button" class="btn btn-{light, secondary ...}">Right</button>

</div>

Botones barra de herramientas


<div class="btn-toolbar mb-2" role="toolbar" aria-label="Toolbar with button groups">

    <div class="btn-group shadow-sm mr-2" role="group" aria-label="First group">

        <button type="button" class="btn btn-white">1</button>

        <button type="button" class="btn btn-white">2</button>

        <button type="button" class="btn btn-white">3</button>

    </div>

    <div class="btn-group shadow-sm mr-2" role="group" aria-label="Second group">

        <button type="button" class="btn btn-white">4</button>

        <button type="button" class="btn btn-white">5</button>

    </div>

    <div class="btn-group shadow-sm" role="group" aria-label="Third group">

        <button type="button" class="btn btn-white">6</button>

    </div>

</div>

Tamaños


<div class="btn-group btn-group-sm shadow-sm" role="group" aria-label="Button group small">

    <button type="button" class="btn btn-secondary">Left</button>

    <button type="button" class="btn btn-secondary">Middle</button>

    <button type="button" class="btn btn-secondary">Right</button>

</div>


<div class="btn-group shadow-sm" role="group" aria-label="Button group">

    <button type="button" class="btn btn-secondary">Left</button>

    <button type="button" class="btn btn-secondary">Middle</button>

    <button type="button" class="btn btn-secondary">Right</button>

</div>


<div class="btn-group btn-group-lg shadow-sm" role="group" aria-label="Button group large">

    <button type="button" class="btn btn-secondary">Left</button>

    <button type="button" class="btn btn-secondary">Middle</button>

    <button type="button" class="btn btn-secondary">Right</button>

</div>

Nesting

Dropdown link Dropdown link 

<div class="btn-group shadow-sm" role="group" aria-label="Button group with nested dropdown">

    <button type="button" class="btn btn-light">1</button>

    <button type="button" class="btn btn-light">2</button>

    <div class="btn-group" role="group">

        <button id="btnGroupDrop1" type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown<span class="icon-expand-more"></span></button>

        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">

            <a class="dropdown-item" href="#">Dropdown link</a>

            <a class="dropdown-item" href="#">Dropdown link</a>

        </div>

    </div>

</div>

Versión vertical

Dropdown link Dropdown link 

<div class="btn-group-vertical shadow-sm">

	<button type="button" class="btn btn-white">First</button>

	<button type="button" class="btn btn-white">Second</button>

	<div class="btn-group" role="group">

		<button id="btnGroupDrop1" type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Third<span class="icon-expand-more"></span></button>

		<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">

			<a class="dropdown-item" href="#">Dropdown link</a>

			<a class="dropdown-item" href="#">Dropdown link</a>

		</div>

	</div>

	<button type="button" class="btn btn-white">Fourth</button>

</div>


<div class="btn-group-vertical">

	<button type="button" class="btn btn-secondary">First</button>

	<button type="button" class="btn btn-secondary">Second</button>

	<div class="btn-group" role="group">

		<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Third<span class="icon-expand-more"></span></button>

		<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">

			<a class="dropdown-item" href="#">Dropdown link</a>

			<a class="dropdown-item" href="#">Dropdown link</a>

		</div>

	</div>

	<button type="button" class="btn btn-secondary">Fourth</button>

</div>

Radio button


<div class="btn-group btn-group-toggle shadow-sm" data-toggle="buttons">

	<label class="btn btn-white active">

		<input type="radio" name="radio-options" id="option1" autocomplete="off" checked> Active Radio

	</label>

	<label class="btn btn-white">

		<input type="radio" name="radio-options" id="option2" autocomplete="off"> Radio

	</label>

	<label class="btn btn-white">

		<input type="radio" name="radio-options" id="option3" autocomplete="off"> Radio

	</label>

</div>


<div class="btn-group btn-group-toggle shadow-sm" data-toggle="buttons">

	<label class="btn btn-{primary, secondary ...}">

		<input type="radio" name="radio-options" id="option1" autocomplete="off" checked> Active Radio

	</label>

	...

</div>

Radio button. Iconos


<div class="btn-group btn-group-toggle shadow-sm" data-toggle="buttons">

    <label class="btn btn-white px-2 active">

        <input type="radio" name="radio-options" id="option-1" autocomplete="off" checked=""> <span class="icon-battery-empty"></span>

    </label>

    <label class="btn btn-white px-2">

        <input type="radio" name="radio-options" id="option-2" autocomplete="off"><span class="icon-battery-25"></span>

    </label>

    <label class="btn btn-white px-2">

        <input type="radio" name="radio-options" id="option-3" autocomplete="off"><span class="icon-battery-50"></span>

    </label>

    <label class="btn btn-white px-2">

        <input type="radio" name="radio-options" id="option-4" autocomplete="off"><span class="icon-battery-75"></span>

    </label>

    <label class="btn btn-white px-2">

        <input type="radio" name="radio-options" id="option-5" autocomplete="off"><span class="icon-battery-full"></span>

    </label>

</div>

Radio button. Filtros individuales


<div class="btn-group btn-group-toggle btn-group-toggle-filter d-inline-block" data-toggle="buttons">

    <label class="btn btn-white shadow-sm mb-1 active">

        <input type="radio" name="radio-options" id="option1" autocomplete="off" checked> Filtro 01

    </label>

    <label class="btn btn-white shadow-sm mb-1">

        <input type="radio" name="radio-options" id="option2" autocomplete="off"> Filtro 02

    </label>

    <label class="btn btn-white shadow-sm mb-1">

        <input type="radio" name="radio-options" id="option3" autocomplete="off"> Filtro 03

    </label>

    <label class="btn btn-white shadow-sm mb-1">

        <input type="radio" name="radio-options" id="option2" autocomplete="off"> Filtro 04

    </label>

    <label class="btn btn-white shadow-sm mb-1">

        <input type="radio" name="radio-options" id="option3" autocomplete="off"> Filtro 05

    </label>

</div>

Checkbox


<div class="btn-group btn-group-toggle shadow-sm" data-toggle="buttons">

	<label class="btn btn-white active">

		<input type="checkbox" name="checkbox-options" id="option1" autocomplete="off" checked> Active checkbox

	</label>

	<label class="btn btn-white">

		<input type="checkbox" name="checkbox-options" id="option2" autocomplete="off"> Checkbox

	</label>

	<label class="btn btn-white">

		<input type="checkbox" name="checkbox-options" id="option3" autocomplete="off"> Checkbox

	</label>

</div>


<div class="btn-group btn-group-toggle shadow-sm" data-toggle="buttons">

	<label class="btn btn-{primary, secondary ...}">

		<input type="checkbox" name="checkbox-options" id="option1" autocomplete="off" checked> Active checkbox

	</label>

	...

</div>

Checkbox. Iconos


<div class="btn-group btn-group-toggle shadow-sm" data-toggle="buttons">

    <label class="btn btn-white px-2 active">

        <input type="checkbox" name="checkbox-options" id="option-1" autocomplete="off" checked=""> <span class="icon-battery-empty"></span>

    </label>

    <label class="btn btn-white px-2">

        <input type="checkbox" name="checkbox-options" id="option-2" autocomplete="off"><span class="icon-battery-25"></span>

    </label>

    <label class="btn btn-white px-2">

        <input type="checkbox" name="checkbox-options" id="option-3" autocomplete="off"><span class="icon-battery-50"></span>

    </label>

    <label class="btn btn-white px-2">

        <input type="checkbox" name="checkbox-options" id="option-4" autocomplete="off"><span class="icon-battery-75"></span>

    </label>

    <label class="btn btn-white px-2">

        <input type="checkbox" name="checkbox-options" id="option-5" autocomplete="off"><span class="icon-battery-full"></span>

    </label>

</div>

Checkbox. Filtros individuales


<div class="btn-group btn-group-toggle btn-group-toggle-filter d-inline-block" data-toggle="buttons">

    <label class="btn btn-white shadow-sm mb-1 active">

        <input type="checkbox" name="checkbox-options" id="option1" autocomplete="off" checked> Filtro 01

    </label>

    <label class="btn btn-white shadow-sm mb-1">

        <input type="checkbox" name="checkbox-options" id="option2" autocomplete="off"> Filtro 02

    </label>

    <label class="btn btn-white shadow-sm mb-1">

        <input type="checkbox" name="checkbox-options" id="option3" autocomplete="off"> Filtro 03

    </label>

    <label class="btn btn-white shadow-sm mb-1">

        <input type="checkbox" name="checkbox-options" id="option2" autocomplete="off"> Filtro 04

    </label>

    <label class="btn btn-white shadow-sm mb-1">

        <input type="checkbox" name="checkbox-options" id="option3" autocomplete="off"> Filtro 05

    </label>

</div>

Filtros unidos

Los filtros se usarán sobre el fondo del body, nunca dentro de un componente card. Reservar su uso para filtrar datos.
En móvil

En queries donde los filtros no puedan convivir, se sustituirá el filtro por un componente dropdown

Filtros separados

Los filtros separados podrán usarse tanto sobre el body o dentro de un componente card. Reservar su uso para productos en lugar de datos