Buttons

Button styles with NPS color variants, sizes aligned to the vertical rhythm, and button groups.

Filled Buttons

Default colors

<a class="ug-btn" href="#">Default</a>
<a class="ug-btn ug-btn--brown" href="#">Brown</a>
<a class="ug-btn ug-btn--red" href="#">Red</a>
<a class="ug-btn ug-btn--green" href="#">Green</a>
<a class="ug-btn ug-btn--blue" href="#">Blue</a>
<a class="ug-btn ug-btn--light" href="#">Light</a>

Outline Buttons

Default Red Blue

<a class="ug-btn ug-btn--outline" href="#">Default</a>
<a class="ug-btn ug-btn--outline ug-btn--red" href="#">Red</a>
<a class="ug-btn ug-btn--outline ug-btn--blue" href="#">Blue</a>

Ghost Button

<a class="ug-btn ug-btn--ghost" href="#">Ghost Button</a>

Sizes

Sizes are aligned to the vertical rhythm: small = 1 leading, default = 1.5 leading, large = 2 leading.

Small (1 leading) Default (1.5 leading) Large (2 leading)

<a class="ug-btn ug-btn--sm" href="#">Small (1 leading)</a>
<a class="ug-btn" href="#">Default (1.5 leading)</a>
<a class="ug-btn ug-btn--lg" href="#">Large (2 leading)</a>

Block Button

Full Width Button

<a class="ug-btn ug-btn--block" href="#">Full Width Button</a>

Disabled

Disabled Disabled Outline

<a class="ug-btn ug-btn--disabled" href="#">Disabled</a>
<a class="ug-btn ug-btn--outline ug-btn--disabled" href="#">Disabled Outline</a>

Button Group

Left Center Right

<div class="ug-btn-group">
  <a class="ug-btn" href="#">Left</a>
  <a class="ug-btn" href="#">Center</a>
  <a class="ug-btn" href="#">Right</a>
</div>

Class Reference

Class	Description
`.ug-btn`	Default button (black, filled)
`.ug-btn--brown\|red\|green\|blue`	NPS color variants
`.ug-btn--light`	Light background, dark text
`.ug-btn--outline`	Transparent bg, colored border + text
`.ug-btn--ghost`	No border, text only with hover bg
`.ug-btn--sm`	Small size (1 leading height)
`.ug-btn--lg`	Large size (2 leading height)
`.ug-btn--block`	Full width
`.ug-btn--disabled`	Disabled state
`.ug-btn__icon`	Icon element inside button
`.ug-btn-group`	Group buttons inline