Roosevelt

← Usage

Button groups

You can align buttons side-by-side, or in left/right/center groups.

Non-grouped example

Nothing fancy here:

<form class="semanticForms" method="post">
  <button type="submit" name="submit">Non-grouped submit button</button>
  <button type="submit" name="submit">Another one</button>
</form>

Button groups

Driven by flexbox to intelligently align the buttons based on how many are in the group:

<form class="semanticForms" method="post">
  <!-- aligns left/right -->
  <menu>
    <li><button type="submit" name="submit">Button 1</button></li>
    <li><button type="submit" name="submit">Button 2</button></li>
  </menu>

  <!-- aligns left/center/right -->
  <menu>
    <li><button type="submit" name="submit">Button 1</button></li>
    <li><button type="submit" name="submit">Button 2</button></li>
    <li><button type="submit" name="submit">Button 3</button></li>
  </menu>
</form>

Buttons may also be integrated into the responsive grid by treating it like a standard form input.

<form class="semanticForms" method="post">
  <dl>
    <div>
      <dt><label for="inline-btn-input">Some input</label></dt>
      <dd><input type="text" name="inline-btn-input" id="inline-btn-input"></dd>
    </div>

    <div>
      <dt><label for="inline-btn">Inline button</label></dt>
      <dd><button id="inline-btn">Inline button</button></dd>
    </div>
  </dl>
</form>

You can also style a link like a Semantic Forms button by applying a class of button-link to it.