Actions

Consistent visual language for describing actions that the user can perform.

Users presented with a choice of non-idempotent actions should be able understand exactly what will happen when they click. To do this in a trim and consistent manner, the Action component provides a derivation of Bootstrap's Button and Dropdown components.

Examples and usage guidelines are provided.

Options

Actions assume that you have a one-dimensional array of potential actions to be displayed in a dropdown. To differentiate these potentially destructive actions from other events on the page, Actions are all housed in circles inspired by Rdio. Apply contextual class names to trigger different colors.

{% highlight html %} {% endhighlight %}

Sizes

Apply the .act-lg, .act-sm or .act-xs class for different sizes.

{% highlight html %}

{% endhighlight %}

Styles

Actions come in three distinct styles, each with slightly different hover behavior. By default actions, the circle border only appears on hover, and there is no fill color. Optionally add the .act-fill class to add a constant fill color to the action, or .act-bordered to add a border with a fill on hover.

default

  

.act-fill

  

.act-bordered

  

{% highlight html %}
default

  

.act-fill

  

.act-bordered

  

{% endhighlight %}

Dropdowns

While you can group multiple actions together, when you want to save space or keep things visually simple, you can use a single action button to toggle a dropdown menu. This larger menu can also offer more description actions.

My Resource

{% highlight html %}

My Resource

{% endhighlight %}

Usage Guidelines

Actions attempt to make clear three of the traditional Five Ws: Who an action applies to, What the action will do, and Where the action will occur.

Who?

Action buttons should always clearly apply to a single resource on your page. Place them near a page heading to signal the actions apply to the page's primary resource, or inline to the side of each item in a collection.

Use the .act-scope class on the parent resource's container element to add a hover effect that helps suggest which item the actions are for.

First Resource

Second Resource


First Resource

Second Resource

{% highlight html %}

First Resource

Second Resource

First Resource

Second Resource

{% endhighlight %}

What?

For action elements that act as a single button and do not contain a dropdown, you can use the element's title attribute to add a short action name. For visual consistency, the action button is very small, and there is room for only one character or a symbol inside.

You can use a Bootstrap Glyphicon for easily understood actions by placing the glyphicon classes directly on the action. Otherwise, use the .dots class on the .act element.

My Resource S

{% highlight html %}

My Resource S

{% endhighlight %}

If your actions are easily represented visually, then the above example is a good strategy to take. But if you want more complex action descriptions or just have more actions, you can use the optional dropdown menu.

Try to describe your actions briefly and with text only where possible. Use Bootstrap's <li class="divider"> element as a divider. Place constructive actions first, and destructive items last. Apply the .destructive class to destructive <li> elements.

With a dropdown

{% highlight html %}

With a dropdown

{% endhighlight %}

Where?

When your actions interact with outside services, it can be important for users to understand the relationship between the data they're viewing and the second data the action might affect.

In this example, many actions apply to editing records in the current tool's database. But the tool might also push data into a Wordpress blog, or our CMS at The Times, called Scoop. The Wordpress action is noted clearly in the main actionbutton. The Scoop actions have been separated into a separate action with some custom styling.

In environments with lots of potential actions, you are encourage to develop cues to signal categories. For example, use the .act-default class for actions against the local database, and .act-danger for actions that push to a production database.

I live in multiple places S

{% highlight html %}

I live in multiple places S

{% endhighlight %}