Aspire Design System

Button: Outline Colors 

<button class="btn btn-yellow btn-outline">Action</button>
<button class="btn btn-orange btn-outline">Action</button>
<button class="btn btn-green btn-outline">Action</button>
<button class="btn btn-blue btn-outline">Action</button>
<button class="btn btn-purple btn-outline">Action</button>
<button class="btn btn-gray btn-outline">Action</button>
  • Content: 
    button,
.btn,
input[type="submit"],
a.btn {
  --btn-color: var(--purple-800-brand);
  --btn-hover: var(--purple-900);
  --btn-focus: var(--purple-900);
  --btn-active: var(--purple-900);
  --btn-text: var(--white);
  font-size: 18px;
  font-family: 'Helvetica Neue';
  color: var(--btn-text);
  background-color: var(--btn-color);
  border: 2px solid var(--btn-color);
  border-radius: 6px;
  padding: .5em 1.33em;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: .25em;
}

button:hover,
.btn:hover,
a.btn:hover,
input[type="submit"]:hover {
  background-color: var(--btn-hover);
  border-color: var(--btn-hover);
}

button:active:enabled,
.btn:active:enabled,
a.btn:active,
input[type="submit"]:active {
  background-color: var(--btn-active);
  border-color: var(--btn-active);
  transform: scale(.95);
}

button:focus,
.btn:focus,
a.btn:focus,
input[type="submit"]:focus {
  background-color: var(--btn-focus);
  border-color: var(--btn-focus);
}

.btn-icon-only {
  min-width: 35px;
  min-height: 35px;
  padding: .25em;
  display: inline-block;
}

.icon {
  display: inline-block;
  font-size: .85em;
}

.btn-outline {
  background-color: white;
  border-color: var(--btn-color);
  color: var(--btn-color);
}

.btn-outline:hover,
.btn-outline:active,
.btn-outline:focus {
  background-color: var(--btn-color);
  border-color: var(--btn-color);
  color: var(--btn-text);
}

.btn-yellow {
  --btn-color: var(--yellow-300-brand);
  --btn-hover: var(--yellow-400);
  --btn-active: var(--yellow-400);
  --btn-focus: var(--yellow-400);
  --btn-text: var(--gray-800);
}

.btn-orange {
  --btn-color: var(--orange-600-brand);
  --btn-hover: var(--orange-700);
  --btn-active: var(--orange-700);
  --btn-focus: var(--orange-700);
  --btn-text: var(--gray-800);
}

.btn-green {
  --btn-color: var(--green-500-brand);
  --btn-hover: var(--green-600);
  --btn-active: var(--green-600);
  --btn-focus: var(--green-600);
  --btn-text: var(--gray-800);
}

.btn-blue {
  --btn-color: var(--blue-800);
  --btn-hover: var(--secondary-blue);
  --btn-active: var(--secondary-blue);
  --btn-focus: var(--secondary-blue);
  --btn-text: var(--white);
}

.btn-purple {
  --btn-color: var(--purple-400-brand);
  --btn-hover: var(--purple-500);
  --btn-active: var(--purple-500);
  --btn-focus: var(--purple-500);
  --btn-text: var(--white);
}

.btn-gray {
  --btn-color: var(--primary-gray);
  --btn-hover: var(--gray-800);
  --btn-active: var(--gray-800);
  --btn-focus: var(--gray-800);
  --btn-text: var(--white);
}

.btn-disabled {
  --btn-color: var(--disabled-color);
  --btn-hover: var(--disabled-color);
  --btn-active: var(--disabled-color);
  --btn-focus: var(--disabled-color);
  --btn-text: var(--primary-gray);
  opacity: 75%;
}

.btn-text {
  --btn-color: transparent;
  --btn-hover: var(--gray-200);
  --btn-active: var(--gray-200);
  --btn-focus: var(--gray-200);
  --btn-text: var(--text-color);
}

.btn-sm {
  font-size: 16px;
}

.btn-lg {
  font-size: 20px;
}
  • URL: /components/raw/button/button.css
  • Filesystem Path: components/02-components/button/button.css
  • Size: 3 KB

Button Uses

Do’s Dont’s
Use clear and concise labels Don’t use punctuation marks
Use sentence-case capitalization Don’t use title case capitalization or all caps
Use active verbs or phrases for labels (i.e. delete or cancel) Don’t use vague and generic labels (i.e. yes or no)

Button Group Uses

  • Primary button should always be first if buttons are stacked
  • In a small window or card: Primary button should always be on the right if buttons are inline
  • In a full page window or card: Primary button should always be on the left if buttons are inline
  • If only using one button, use the filled primary button
  • If using two buttons, use filled as the primary button and either outline (same color as filled) or text button for secondary
  • If using three buttons, use filled as primary, outline as secondary, and text as tertiary (unless third button has same hierarchy, then can use two outline buttons)