Buttons allow an application to communicate action and direct user intent.

Usage

Clarity comes with three different types of buttons to use. They are provided to give visual distinction between the priority or heirarchy of the buttons in the application.

Solid buttons look heavy on purpose. They direct the user’s attention to the primary action the application is suggesting that the user take.

Outline buttons provide a lighter weight button style. They are used to indicate a secondary action that compliments a primary action or to reduce visual noise when there are many action of equal importance on the page.

Flat buttons are used in multiple scenarios. They are used as tertiary buttons. They can also be used inline because they are different from content in style and recognizable as buttons alongside content.

Buttons vs Links

While buttons and links can both be given similar visual treatments, it is important that you use a link (or anchor element) for anytime clicking the element will navigate you to a different page. Buttons are for interaction in the current page, such as refreshing the content or submitting a form.

Use flat buttons when a user is expected to **take an action**.

vs

Anchor Link

Use a link when a user is expected to be **taken to a different page**.

Placement

There are two distinct patterns when it comes to the placement of a button.

Z Pattern

The Z-pattern is a natural way for the user to go through content within a constrained container and when tasks are oriented from the top-left and ending with a primary call to action on the right bottom side of the container. This pattern is reversed for right to left languages.

Modals and Wizards follow the Z Pattern

F Pattern

The F-pattern is a natural way to go through content in an unconstrained container, such as a form on the page itself. The user will go through the content line-by-line, arriving at a call to action at the end.

Forms and Cards follow the F Pattern

Style

Consistent button styles make it easier for a user to recognize areas to take action across an application.

Typography

The text inside of buttons is always uppercase. This indicates action by differentiating button text from links and other content on the page. Use descriptive language on buttons relating to the user’s intent.

Use generic language not related to the action and not relating to the intent of the user.

Use a call to action on buttons.

Visual Style

Clarity buttons have several distinct properties and design considerations.

Border Radius

Clarity buttons have a border radius of 3px.

Size

Clarity offers two button sizes:

• Default height of 36px
• Compact height of 24px

Compact is used in content areas where smaller buttons are needed to de-emphasize calls to action. This is especially true when multiple actions of equal importance are available.

Primary Color

A primary color provides consistency across an application. It trains the user to look for that color when trying to find an action. Clarity defaults to blue. This “action blue” can be found across all types of buttons, tabs, and other action-related components.

Action-based Color

Different colors may be used based on the severity of an action’s result. For example, using a red button when “deleting” files indicates high severity.

Icons

Icon buttons are useful where interface space may be limited. If an icon represents the action well, users can sometimes recognize them quicker than reading text. Lastly, using icon buttons can help in the situation where the use of long labels may be challenging.

We recommend you choose an icon that best describes the action that the user will be doing. Users may avoid unknown or abstract icon buttons.

Types & Sizes

Icon buttons are available in the solid, outline, and flat types. It’s also best to use the normal (36px) sized ones. This makes them easier to recognize and to click.

Use small icon buttons in most cases. They are difficult to see and distinguish what the icon is or represents. They also create smaller click targets, making them harder to click.

With Text

Create Delete

If you have the space, adding text helps users understand the action. Start icon buttons with icons and follow with text.

Create Delete

Start icon buttons with text and follow with icon. This makes them more difficult to scan quickly.

Title Attribute

If your icon button is has no text, we recommend adding the title=" attribute to your icon buttons. This adds some additional context for users unfamiliar with what action your icon button might produce. Hovering over the icon button for a moment will show a tooltip that has the title text. The text should reflect the action being completed.

Code & Examples

Solid Buttons

<div>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-warning">Warning</button>
  <button class="btn btn-danger">Danger</button>
  <button class="btn btn-danger" disabled>Disabled</button>
</div>

Outline

<div>
  <button class="btn btn-outline">Regular</button>
  <button class="btn btn-success-outline">Success-Outline</button>
  <button class="btn btn-info-outline">Info</button>
  <button class="btn btn-warning-outline">Warning</button>
  <button class="btn btn-danger-outline">Danger</button>
  <button class="btn btn-outline" disabled>Disabled</button>
</div>

Flat Buttons

<div>
  <button class="btn btn-link">Regular</button>
  <button class="btn btn-link" disabled>Disabled</button>
  <button class="btn btn-sm btn-link">Regular</button>
  <button class="btn btn-sm btn-link" disabled>Disabled</button>
</div>

Types: Primary,Secondary and Tertiary

<div>
  <button class="btn btn-primary">Primary</button>
  <button class="btn">Secondary</button>
  <button class="btn btn-link">Tertiary</button>
</div>

States: Info, Success and Danger Outline Buttons

<div>
  <button class="btn btn-info-outline">Info</button>
  <button class="btn btn-success-outline">Success</button>
  <button class="btn btn-danger-outline">Danger</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-danger">Danger</button>
</div>

Sizes: Normal, Small, Normal Flat, Small Flat

Normal

Small

Normal Flat

Small Flat

<h4>Normal</h4>

<div>
  <button class="btn">Regular</button>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-warning">Warning</button>
  <button class="btn btn-danger">Danger</button>
  <button class="btn" disabled>Disabled</button>
</div>

<h4>Small</h4>

<div>
  <button class="btn btn-sm">Regular</button>
  <button class="btn btn-primary btn-sm">Primary</button>
  <button class="btn btn-success btn-sm">Success</button>
  <button class="btn btn-info btn-sm">Info</button>
  <button class="btn btn-warning btn-sm">Warning</button>
  <button class="btn btn-danger btn-sm">Danger</button>
  <button class="btn btn-sm" disabled>Disabled</button>
</div>

<h4>Normal Flat</h4>

<div>
  <button class="btn btn-link">Flat Regular</button>
  <button class="btn btn-link" disabled>Flat Disabled</button>
</div>

<h4>Small Flat</h4>

<div>
  <button class="btn btn-link btn-sm" disabled>Flat Disabled</button>
</div>

Block

<div>
  <button class="btn btn-primary btn-block">Primary</button>
  <button class="btn btn-success btn-block">Success</button>
</div>

Inverse

<div class="demo-inverse">
  <button class="btn btn-inverse">Inverse</button>
  <button class="btn btn-inverse" disabled>Disabled Inverse</button>
</div>

Icon

<div>
  <button type="button" class="btn btn-icon" aria-label="home">
    <clr-icon shape="home"></clr-icon>
  </button>
  <button type="button" class="btn btn-icon btn-primary" aria-label="settings">
    <clr-icon shape="cog"></clr-icon>
  </button>
  <button type="button" class="btn btn-icon btn-warning" aria-label="warning">
    <clr-icon shape="warning-standard"></clr-icon>
  </button>
  <button type="button" class="btn btn-icon btn-danger" aria-label="error">
    <clr-icon shape="error-standard"></clr-icon>
  </button>
  <button type="button" class="btn btn-icon btn-success" aria-label="done">
    <clr-icon shape="check"></clr-icon>
  </button>
  <button type="button" class="btn btn-icon" disabled aria-label="home">
    <clr-icon shape="home"></clr-icon>
  </button>
</div>

Loading

Use the clrLoading directive to change the state of the spinner button. The directive can be set to one of the following values:

• ClrLoadingState.DEFAULT: the default state of the button.
• ClrLoadingState.LOADING: replaces the button text with a spinner.
• ClrLoadingState.SUCCESS: briefly shows a check mark, and automatically transition back to the ClrLoadingState.DEFAULT state.

<button [clrLoading]="validateBtnState" class="btn btn-info-outline" (click)="validateDemo()">Validate</button>
<button [clrLoading]="submitBtnState" type="submit" class="btn btn-success-outline" (click)="submitDemo()">
  Submit
</button>

import { ClrLoadingState } from '@clr/angular';

export class ButtonLoadingDemo {
  validateBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;
  submitBtnState: ClrLoadingState = ClrLoadingState.DEFAULT;

  validateDemo() {
    this.validateBtnState = ClrLoadingState.LOADING;
    //Validating Logic
    this.validateBtnState = ClrLoadingState.SUCCESS;
  }

  submitDemo() {
    this.submitBtnState = ClrLoadingState.LOADING;
    //Submit Logic
    this.submitBtnState = ClrLoadingState.DEFAULT;
  }
}