Kuali Student Design Guide
0.1.1

Button atom

Buttons

Example

UI

HTML
<p>
  <button class="ks-Button ks-Button--default ks-Button--small">Default</button>
  <button class="ks-Button ks-Button--primary ks-Button--small">Primary</button>
  <button class="ks-Button ks-Button--success ks-Button--small">Success</button>
  <button class="ks-Button ks-Button--info ks-Button--small">Info</button>
  <button class="ks-Button ks-Button--warning ks-Button--small">Warning</button>
  <button class="ks-Button ks-Button--danger ks-Button--small">Danger</button>
</p>
<p>
  <button class="ks-Button ks-Button--default">Default</button>
  <button class="ks-Button ks-Button--primary">Primary</button>
  <button class="ks-Button ks-Button--success">Success</button>
  <button class="ks-Button ks-Button--info">Info</button>
  <button class="ks-Button ks-Button--warning">Warning</button>
  <button class="ks-Button ks-Button--danger">Danger</button>
</p>
<p>
  <button class="ks-Button ks-Button--default ks-Button--large">Default</button>
  <button class="ks-Button ks-Button--primary ks-Button--large">Primary</button>
  <button class="ks-Button ks-Button--success ks-Button--large">Success</button>
  <button class="ks-Button ks-Button--info ks-Button--large">Info</button>
  <button class="ks-Button ks-Button--warning ks-Button--large">Warning</button>
  <button class="ks-Button ks-Button--danger ks-Button--large">Danger</button>
</p>
CSS
@color-Default: #fff;
@color-Primary: #428bca;
@color-Success: #5cb85c;
@color-Danger: #d9534f;
@color-Info: #5bc0de;
@color-Warning: #f0ad4e;

.ks-Button {
  border: 0.1em solid transparent;
  border-radius: 0.25em;
  cursor: pointer;
  padding: 0.5em 1em;

  &--default {
    .mixin(@color-Default);
  }

  &--primary {
    .mixin(@color-Primary);
  }

  &--success {
    .mixin(@color-Success);
  }

  &--info {
    .mixin(@color-Info);
  }

  &--warning {
    .mixin(@color-Warning);
  }

  &--danger {
    .mixin(@color-Danger);
  }

  &--small {
    font-size: 80%;
  }

  &--large {
    font-size: 120%;
  }

  .mixin(@color) {
    @textColor: contrast(@color, #222, #fff, 80%);
    background-color: @color;
    border-color: darken(@color, 15%);
    box-shadow: inset 0 0.1em 0 0 tint(@color, 15%);
    color: @textColor;
    text-shadow: 0 -0.1em contrast(@textColor, darken(@color, 30%), #fff);

    &:hover, &:focus, &:active {
      background-color: darken(@color, 15%);
      border-color: darken(@color, 30%);
      color: @textColor;
      text-decoration: none;
    }

    &:active {
      box-shadow: inset 0 0.1em 0.1em 0 darken(@color, 30%);
    }
  }
}

Wording

Action + Object
Use this format to clarify what will happen when the action is triggered. Default labels for buttons should be in the form action + object type, such as Save Calendar.
Space constraints
If there is a space constraint, label a button only with the action (Save).
Articles
By default, articles should not be used in labels. Use the article only when it is necessary to communicate the function of the button (Release to Departments).

Capitalization (title case)

Capitalize every word except articles (a, an, the), coordinating conjunctions (and, or), and prepositions of four or fewer letters, except when part of a verb phrase, such as Starting Up the Computer. Always capitalize the first and last word, even if it is an article, a conjunction, or a preposition of four or fewer letters.