Buttons | Romo

Default buttons

Button styles can be applied to anything with the .romo-btn class. However, typically you’ll want to apply these to only <a> and <button> elements for the best rendering.

Anchor

<button class="romo-btn">Button</button>
<a class="romo-btn">Anchor</a>
<input type="button" class="romo-btn" value="Input-button" />
<input type="submit" class="romo-btn" value="Input-submit" />
<input type="reset"  class="romo-btn" value="Input-reset" />
<button class="romo-btn" disabled>Disabled by prop button</button>
<button class="romo-btn disabled">Disabled by class button</button>
<button class="romo-btn active">Active button</button>

Active state

Add .active to make any button appear pressed.

<button class="romo-btn">Default</button>
<button class="romo-btn active">Active</button>

Button sizes

Use numbered style classes to size up/down buttons.

<div class="romo-push0-bottom">
  <button class="romo-btn">.romo-btn</button>
  <button class="romo-btn romo-btn0">.romo-btn0</button>
  <button class="romo-btn romo-btn-small">.romo-btn-small</button>
</div>
<div class="romo-push0-bottom">
  <button class="romo-btn">.romo-btn</button>
  <button class="romo-btn romo-btn1">.romo-btn1</button>
</div>
<div class="romo-push0-bottom">
  <button class="romo-btn">.romo-btn</button>
  <button class="romo-btn romo-btn2">.romo-btn2</button>
  <button class="romo-btn romo-btn-large">.romo-btn-large</button>
</div>
<div class="romo-push0-bottom">
  <button class="romo-btn">.romo-btn</button>
  <button class="romo-btn romo-btn3">.romo-btn3</button>
</div>

Use to align with inline text.

.romo-text0 .romo-text-small

.romo-text1 .romo-text

.romo-text2 .romo-text-large

.romo-text3

<div class="romo-push0-bottom">
  <span class="romo-text0 romo-align-middle">.romo-text0</span>
  <button class="romo-btn romo-btn0">.romo-btn0</button>
  <span class="romo-text-small romo-align-middle">.romo-text-small</span>
  <button class="romo-btn romo-btn-small">.romo-btn-small</button>
</div>
<div class="romo-push0-bottom">
  <span class="romo-text1 romo-align-middle">.romo-text1</span>
  <button class="romo-btn romo-btn1">.romo-btn1</button>
  <span class="romo-align-middle">.romo-text</span>
  <button class="romo-btn">.romo-btn</button>
</div>
<div class="romo-push0-bottom romo-text2">
  <span class="romo-text2 romo-align-middle">.romo-text2</span>
  <button class="romo-btn romo-btn2">.romo-btn2</button>
  <span class="romo-text-large romo-align-middle">.romo-text-large</span>
  <button class="romo-btn romo-btn-large">.romo-btn-large</button>
</div>
<div class="romo-push0-bottom romo-text3">
  <span class="romo-text3 romo-align-middle">.romo-text3</span>
  <button class="romo-btn romo-btn3">.romo-btn3</button>
</div>

Or use .romo-btn-inline to manually vertically align text that isn’t inline with an image.

.romo-text-small

<div class="romo-row romo-push0-bottom">
  <div class="romo-span romo-1-6 romo-align-right romo-pad0-right">
    <button class="romo-btn romo-btn-large">.romo-btn-large</button>
  </div>
  <div class="romo-span romo-1-6 romo-text-small">
    <span class="romo-btn-inline-large">.romo-text-small</span>
  </div>
  <div class="romo-span romo-offset-4-6"></div>
</div>

Use .romo-btn-block to add blocking full-width buttons.

<button class="romo-btn romo-btn-block">Blocking full-width button</button>

Alternate buttons

Use these as an alternative to the default styles and to add color emphasis to buttons.

Disabled state	Active state	Large size	Default size	Small size	class=""
					`romo-btn`
					`romo-btn romo-btn-alt`
					`romo-btn romo-btn-primary`
					`romo-btn romo-btn-warning`
					`romo-btn romo-btn-danger` Or, `romo-btn romo-btn-error`
					`romo-btn romo-btn-info`
					`romo-btn romo-btn-success`
					`romo-btn romo-btn-inverse`
					`romo-btn romo-btn-link`

Button groups

Group buttons together by wrapping them in .romo-btn-group.

<div class="romo-btn-group">
  <button class="romo-btn">Left</button>
  <button class="romo-btn">Middle</button>
  <button class="romo-btn">Right</button>
</div>

Optionally with border radius.

<div class="romo-btn-group romo-btn-group-border0-radius">
  ...
</div>
<div class="romo-btn-group romo-btn-group-border-radius">
  ...
</div>
<div class="romo-btn-group romo-btn-group-border1-radius">
  ...
</div>
<div class="romo-btn-group romo-btn-group-border2-radius">
  ...
</div>

With alternate buttons.

<< Prev Page 1 Next >>

<div class="romo-btn-group romo-btn-group-border-radius">
  <a href="#" class="romo-btn romo-btn-link disabled"><< Prev</a>
  <strong class="romo-btn romo-btn-link romo-text-bold">Page 1</strong>
  <a href="#" class="romo-btn romo-btn-link">Next >></a>
</div>

Multiple button groups

Combine sets of button groups for more complex components.

<div class="romo-btn-group">
  <button class="romo-btn">0</button>
  <button class="romo-btn">1</button>
  <button class="romo-btn">2</button>
  <button class="romo-btn">3</button>
</div>
<div class="romo-btn-group">
  <button class="romo-btn">4</button>
  <button class="romo-btn">5</button>
  <button class="romo-btn">6</button>
  <button class="romo-btn">7</button>
  <button class="romo-btn">8</button>
</div>
<div class="romo-btn-group">
  <button class="romo-btn">9</button>
</div>

Vertical button groups

Make a group of buttons appear vertically stacked rather than horizontally by using .romo-btn-group-vertical.

Note: you should set a static width on vertical button group buttons so they always line up as expected regardless of their content.

<div class="romo-btn-group-vertical romo-align-top">
  <button class="romo-btn" style="width: 40px">1</button>
  <button class="romo-btn" style="width: 40px">2</button>
  <button class="romo-btn" style="width: 40px">3</button>
  <button class="romo-btn" style="width: 40px">4</button>
</div>
<div class="romo-btn-group-vertical romo-align-top">
  <button class="romo-btn" style="width: 80px">First</button>
  <button class="romo-btn" style="width: 80px">Second</button>
  <button class="romo-btn" style="width: 80px">Third</button>
</div>

Optionally with border radius.

<div class="romo-btn-group-vertical romo-btn-group-border0-radius">
  ...
</div>
<div class="romo-btn-group-vertical romo-btn-group-border-radius">
  ...
</div>
<div class="romo-btn-group-vertical romo-btn-group-border1-radius">
  ...
</div>
<div class="romo-btn-group-vertical romo-btn-group-border2-radius">
  ...
</div>

Combined button groups

Combine horizontal and vertical button groups to create grids of buttons.

<div class="romo-btn-group">
  <div class="romo-btn-group-vertical romo-align-top">
    <button class="romo-btn" style="width: 40px">7</button>
    <button class="romo-btn" style="width: 40px">4</button>
    <button class="romo-btn" style="width: 40px">1</button>
    <button class="romo-btn" style="width: 40px">.</button>
  </div>
  <div class="romo-btn-group-vertical romo-align-top">
    <button class="romo-btn" style="width: 40px">8</button>
    <button class="romo-btn" style="width: 40px">5</button>
    <button class="romo-btn" style="width: 40px">3</button>
    <button class="romo-btn" style="width: 40px">0</button>
  </div>
  <div class="romo-btn-group-vertical romo-align-top">
    <button class="romo-btn" style="width: 40px">9</button>
    <button class="romo-btn" style="width: 40px">6</button>
    <button class="romo-btn" style="width: 40px">3</button>
    <button class="romo-btn" style="width: 40px">=</button>
  </div>
  <div class="romo-btn-group-vertical romo-align-top">
    <button class="romo-btn" style="width: 40px">/</button>
    <button class="romo-btn" style="width: 40px">*</button>
    <button class="romo-btn" style="width: 40px">-</button>
    <button class="romo-btn" style="width: 40px">+</button>
  </div>
</div>

Optionally with border radius.

<div class="romo-btn-group romo-btn-group-border2-radius">
  <div class="romo-btn-group-vertical romo-align-top">
    ...
  </div>
  <div class="romo-btn-group-vertical romo-align-top">
    ...
  </div>
  <div class="romo-btn-group-vertical romo-align-top">
    ...
  </div>
  <div class="romo-btn-group-vertical romo-align-top">
    ...
  </div>
</div>