CTZN

Buttons

Link

Go forth! 

<p>
  <a href="">Go forth!</a>
</p>
Button

<p>
  <button type="submit">Send</button>
</p>
Disabled

<p>
  <button type="submit" disabled>Send</button>
</p>
Warning

<p class="warning">
  <button type="submit">Delete</button>
</p>
Link

Next 

<p class="action">
  <a href="…">Next</a>
</p>
Like
<div class="post-item">
  <footer>
    <ul class="action">
      <li>
        <button role="checkbox" aria-checked="false">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-heart" /><foreignobject>Heart</foreignobject></svg>
        </button>
      </li>
      <li>
        <a href="">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-reply"></use></svg>
          Comment
        </a>
      </li>
      <li>
        <button role="checkbox" aria-checked="false">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-star" /><foreignobject>Feature</foreignobject></svg>
        </button>
      </li>
      <li>
        <a href="">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-more" /><foreignObject>Options</foreignObject></svg>
        </a>
      </li>
    </ul>
  </footer>
</div>
Like (active)
<div class="post-item">
  <footer>
    <ul class="action">
      <li>
        <button role="checkbox" aria-checked="true">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-heart" /><foreignObject>Heart</foreignObject></svg>
        </button>
      </li>
      …
      <li>
        <button role="checkbox" aria-checked="true">
          <svg class="icon" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icon-star" /><foreignObject>Featured</foreignObject></svg>
        </button>
      </li>
      …
    </ul>
  </footer>
</div>
Dialog

<div class="dialog page">
  <p class="action">
    <button>Take Action</button>
  </p>
</div>
Post Options
<div class="post-options active">
  <div>
    <ul>
      <li>
        <button>Edit</button>
      </li>
      <li class="warning">
        <button>Delete</button>
      </li>
    </ul>
    <ul>
      <li>
        <button>Cancel</button>
      </li>
    </ul>
  </div>
</div>

Page Options

Page Title

← Go Back

Related options

<section class="page">
  …

  <div class="option-list">
    <h3>Related options</h3>
    <ul>
      <li><a href="…">Option A</a></li>
      <li><a href="…">Option B</a></li>
      <li><a href="…">Option C</a></li>
    </ul>
    <ul>
      <li>
        <form action="…" method="post">
          <button>Action</button>
        </form>
      </li>
    </ul>
  </div>

</section>

Submit

Page Title

Cancel 

<section class="edit page">
  <header>
    …
  </header>

  <form>
    …
    <p class="submit">
      <button>Send</button>
    </p>
  </form>

</section>

Paging

Update button

Update