Vitreo
Components

Button groups

Related actions in one row

Group

Code 
<div class="btn-group" role="group" aria-label="Text align">
  <button type="button" class="btn btn-ghost btn-icon active" aria-label="Left" aria-pressed="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  <button type="button" class="btn btn-ghost btn-icon" aria-label="Centre" aria-pressed="false"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  <button type="button" class="btn btn-ghost btn-icon" aria-label="Right" aria-pressed="false"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>

With labels

Code 
<div class="btn-group" role="group" aria-label="View">
  <button type="button" class="btn btn-gray">Day</button>
  <button type="button" class="btn btn-gray active" aria-pressed="true">Week</button>
  <button type="button" class="btn btn-gray">Month</button>
</div>

Toolbar

Groups side by side.

Code 
<div class="btn-group" role="group" aria-label="Formatting">
  <button type="button" class="btn btn-ghost btn-icon" aria-label="Bold"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  <button type="button" class="btn btn-ghost btn-icon" aria-label="Italic"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  <button type="button" class="btn btn-ghost btn-icon" aria-label="Underline"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>
<div class="btn-group" role="group" aria-label="Lists">
  <button type="button" class="btn btn-ghost btn-icon" aria-label="Bullets"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  <button type="button" class="btn btn-ghost btn-icon" aria-label="Numbers"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>
© Vitreo. All rights reserved.