usecuekitchensink

Actions

The buttons for what you can do, the tiles of an admin dashboard, the less used actions behind “advanced” and the three dots, the popover of annotate.now, and the toasts that say it is done.

Buttons

Square and bold, like on pos.usecue.com. Primary for the main action, one per form. Ghost for Cancel next to a submit button, for another way to log in, and for the actions behind “advanced”. Danger for what can not be undone.

HTML 
<div class="buttons">
<button type="button" class="button">Primary</button>
<button type="button" class="button ghost">Ghost</button>
<button type="button" class="button danger">Danger</button>
<button type="button" class="button ghost danger">Ghost danger</button>
</div>

Small and disabled

HTML 
<div class="buttons">
<button type="button" class="button small">Primary</button>
<button type="button" class="button small ghost">Ghost</button>
<button type="button" class="button" disabled>Disabled</button>
<button type="button" class="button ghost" disabled>Disabled</button>
</div>

wide makes a button as wide as its column. A link can look like a button, and a button like a link: text-link for an action that has to be posted.

Log in with Google

A link

HTML 
<p><a href="#buttons" class="button ghost wide"><img src="/img/google.svg" alt="">Log in with Google</a></p>
<p class="buttons">
<a href="#buttons" class="button">A link</a>
<button type="button" class="text-link">A button</button>
<button type="button" class="icon-button" aria-label="Previous boards"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13 3a9 9 0 0 0-9 9H1l3.9 3.9.1.1L9 12H6a7 7 0 1 1 2.05 4.95l-1.42 1.42A9 9 0 1 0 13 3zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg><span class="badge">3</span></button>
</p>

Tiles

The admin dashboard of annotate.now: a square tile with an icon per admin page. A badge counts what waits, like the registrations to approve on Users.

HTML 
<ul class="iconlinks">
<li><a href="#tiles"><img src="/img/admin/browsers-solid.svg" alt="">Boards</a></li>
<li><a href="#tiles"><img src="/img/admin/user-friends-solid.svg" alt="">Users<span class="badge" title="Waiting for approval">2</span></a></li>
<li><a href="#tiles"><img src="/img/admin/shield-check-solid.svg" alt="">Whitelist</a></li>
<li><a href="#tiles"><img src="/img/admin/envelope-solid.svg" alt="">Email templates</a></li>
<li><a href="#tiles"><img src="/img/admin/clock-solid.svg" alt="">Crons</a></li>
</ul>

Advanced

From the interface of the Usecue CMS: “advanced” after the main button shows the less used actions in its place, as ghost buttons, and the fields of the form marked advanced-only. So Delete is never next to Save until you ask for it.

Clone Rename Delete
HTML 
<form data-demo>
<div class="form-group">
<label for="title">Title</label>
<input type="text" id="title" name="title" value="About us">
</div>
<div class="form-group advanced-only">
<label for="slug">Address</label>
<input type="text" id="slug" name="slug" value="about-us">
</div>
<div class="buttons">
<button class="button">Save</button>
<span class="advanced">
<button type="button" class="advanced-toggle" aria-expanded="false">advanced</button>
<span class="advanced-actions">
<a href="#advanced" class="button ghost">Clone</a>
<a href="#advanced" class="button ghost">Rename</a>
<a href="#advanced" class="button ghost danger">Delete</a>
</span>
</span>
</div>
</form>

The three dots of annotate.now, for the less used actions of a page or a board, so they are not next to the main button. The button opens what follows it, a click elsewhere or Escape closes it (js/menu.js). right opens it to the left, at the right side of a page.

Edit
HTML 
<div class="buttons">
<a href="#menu" class="button">Edit</a>
<div class="menu">
<button type="button" class="icon-button" aria-label="More actions" title="More actions"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg></button>
<div hidden>
<a href="#menu">Set password</a>
<a href="#menu">Reset 2FA</a>
<button type="button" class="danger" data-toast="User deleted">Delete user</button>
</div>
</div>
</div>

Popover

The annotations of annotate.now, below the button in its top bar, with a triangle pointing at it. A red dot for an open one, gray when it is done; the cross marks it done. Only the list scrolls.

HTML 
<div class="popover">
<button type="button" class="icon-button" aria-label="Annotations"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm0 14H5.17L4 17.17V4h16v12z"/></svg><span class="badge">2</span></button>
<div hidden>
<header>Annotations</header>
<ul>
<li><a href="#popover"><span><strong>Make the logo a little bigger</strong><small>5 minutes ago · Anna · Desktop · /about · 2 replies</small></span></a><button type="button" aria-label="Done" title="Mark as done" data-toast="Marked as done">×</button></li>
<li><a href="#popover"><span><strong>This button wraps on a phone</strong><small>1 hour ago · Tom · Mobile · /pricing</small></span></a><button type="button" aria-label="Done" title="Mark as done" data-toast="Marked as done">×</button></li>
<li class="done"><a href="#popover"><span><strong>Typo in the second paragraph</strong><small>yesterday · Anna · Desktop · /</small></span></a></li>
</ul>
</div>
</div>

Toasts

A message at the bottom for a moment, the newest on top. Call toast('Saved') from a script, or give a button data-toast.

HTML 
<div class="buttons">
<button type="button" class="button" data-toast="Saved">Show a toast</button>
<button type="button" class="button ghost" data-toast="Link copied">Show another</button>
</div>