Vitreo
Components
NotificationsView all
TOTheo Okafor approved the Q4 release plan2 min agoNew order #11330 for $204.12 from Nora Svensson28 min agoHSHana Sato mentioned you in ticket #20931 hour agoPayout of $12,989.62 sent to Riverstone Bank •• 74662 hours agoMCMei Chen shared Roadmap 2.0 with youYesterday
MLMaya Lindqvistmaya.lindqvist@northwind.test
ProfileSettingsBillingHelp center
Sign out

Button groups

Related actions in one row

Group

Code 
<div class="btn-group btn-segment" role="group" aria-label="Text align" data-choice>
  <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 btn-segment" role="group" aria-label="View" data-choice>
  <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 btn-segment" role="group" aria-label="Formatting">
  <button type="button" class="btn btn-ghost btn-icon" aria-label="Bold" aria-pressed="false" data-toggle-pressed><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" aria-pressed="false" data-toggle-pressed><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" aria-pressed="false" data-toggle-pressed><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>
<div class="btn-group btn-segment" role="group" aria-label="Lists">
  <button type="button" class="btn btn-ghost btn-icon" aria-label="Bullets" aria-pressed="false" data-toggle-pressed><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" aria-pressed="false" data-toggle-pressed><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>
© Vitreo. All rights reserved.