Button

Interactive element that users can click to perform an action or navigate to another page.

Class name	Type
`.prs-btn`	Component	For <button> or <a>
`.prs-btn-primary`	Modifier	Contained variant
`.prs-btn-secondary`	Modifier	Outlined variant
`.prs-btn-tertiary`	Modifier	Ghost-like variant
`.prs-btn-info`	Modifier	Blue variant
`.prs-btn-success`	Modifier	Green variant
`.prs-btn-warning`	Modifier	Yellow variant
`.prs-btn-danger`	Modifier	Red variant
`.prs-btn-sm`	Modifier	Small variant
`.prs-btn-lg`	Modifier	Large variant
`.prs-btn-square`	Modifier	Square variant
`.prs-btn-circle`	Modifier	Circle variant
`.prs-btn_hover`	State	Manually apply visual hover
`.prs-btn_focus`	State	Manually apply visual focus
`.prs-btn_disabled`	State	Manually apply visual disabled

Primary

<button class="prs-btn prs-btn-primary">Default</button>
<button class="prs-btn prs-btn-primary prs-btn-danger">Danger</button>
<button class="prs-btn prs-btn-primary prs-btn-success">Success</button>

Secondary

<button class="prs-btn prs-btn-secondary">Default</button>
<button class="prs-btn prs-btn-secondary prs-btn-danger">Danger</button>
<button class="prs-btn prs-btn-secondary prs-btn-success">Success</button>

Tertiary

<button class="prs-btn prs-btn-tertiary">Default</button>
<button class="prs-btn prs-btn-tertiary prs-btn-danger">Danger</button>
<button class="prs-btn prs-btn-tertiary prs-btn-success">Success</button>

Sizes

<button class="prs-btn prs-btn-primary prs-btn-sm">Small</button>
<button class="prs-btn prs-btn-primary prs-btn-lg">Large</button>

Shapes

<button class="prs-btn prs-btn-primary prs-btn-square" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg> </button>
<button class="prs-btn prs-btn-primary prs-btn-circle" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg> </button>
<button class="prs-btn prs-btn-secondary prs-btn-square" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg> </button>
<button class="prs-btn prs-btn-secondary prs-btn-circle" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg> </button>
<button class="prs-btn prs-btn-tertiary prs-btn-square" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg> </button>
<button class="prs-btn prs-btn-tertiary prs-btn-circle" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#nav-x" /></svg> </button>

With Icon

Add <svg>, <iconify-icon>, or .icon as a direct decendant to make sure everything renders correctly.

<button class="prs-btn prs-btn-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#edit-download-export" /></svg> Leading Icon</button>
<button class="prs-btn prs-btn-primary">Trailing Icon <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" role="img"><use href="/_assets/prs-icons.svg#edit-add" /></svg></button>

Hover

Hover styles will apply automatically, but we also provide .prs-btn_hover if you need to manually apply the hover state.

<button class="prs-btn prs-btn-primary prs-btn_hover">Primary</button>
<button class="prs-btn prs-btn-secondary prs-btn_hover">Secondary</button>
<button class="prs-btn prs-btn-tertiary prs-btn_hover">Tertiary</button>

Focus

Focus styles will apply automatically, but we also provide .prs-btn_focus if you need to manually apply the focus state.

<button class="prs-btn prs-btn-primary prs-btn_focus">Primary</button>
<button class="prs-btn prs-btn-secondary prs-btn_focus">Secondary</button>
<button class="prs-btn prs-btn-tertiary prs-btn_focus">Tertiary</button>

Disabled

Disabled styles will automatically apply when you use the disabled attribute where applicable.

.prs-btn_disabled is provided if you need to manually apply the disabled state on elements that do not natively support it. Be aware that the .prs-btn_disabled class does not truly disable the element. It is only visual. If the user disables CSS in their browser the element will be fully interactive.

<button class="prs-btn prs-btn-primary" disabled>Primary</button>
<button class="prs-btn prs-btn-secondary" disabled>Secondary</button>
<button class="prs-btn prs-btn-tertiary" disabled>Tertiary</button>
<a href="#" class="prs-btn prs-btn_disabled" aria-disabled="true" tabindex="-1">Ugh</a>

<!-- this is just for demo purposes -->
<script>
  document.querySelectorAll('a.prs-btn').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault() }) });
</script>

CSS

Full Library

Prose CSS Prose Tokens

Component Only

.prs-btn {
  padding: .25rem 1rem;
  border-width: var(--prs-border-btn);
  border-style: solid;
  border-color: transparent;
  font-size: 1rem;
  line-height: 1.375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
  text-decoration-line: none;
  border-radius: var(--prs-radius-btn);
  transition-property: var(--prs-transition-property);
  transition-timing-function: var(--prs-transition-timing);
  transition-duration: var(--prs-transition-duration);

  &:focus-visible,
  &.prs-btn_focus {
    outline: 2px solid transparent;
    outline-offset: 1px;
  }

  &.prs-btn-sm {
    padding: .25rem .75rem;
    font-size: .75rem;
    line-height: 1rem;
  }

  &.prs-btn-lg {
    padding: .75rem 1rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
  }

  &.prs-btn-square,
  &.prs-btn-circle {
    padding: 0;
    width: 2rem;
    height: 2rem;
    line-height: 1;
    flex-shrink: 0;
  }

  &.prs-btn-circle {
    border-radius: 9999px;
  }

  &.prs-btn-square.prs-btn-sm,
  &.prs-btn-circle.prs-btn-sm {
    width: 1.5rem;
    height: 1.5rem;
  }

  &.prs-btn-square.prs-btn-lg,
  &.prs-btn-circle.prs-btn-lg {
    width: 3rem;
    height: 3rem;
  }

  svg,
  iconify-icon,
  .icon {
    width: 1.125rem;
    height: 1.125rem;
    font-size: 1.125rem;
    display: block;
  }

  &.prs-btn-sm {
    svg,
    iconify-icon,
    .icon {
      width: .875rem;
      height: .875rem;
      font-size: .875rem;
    }
  }

  &.prs-btn-lg {
    svg,
    iconify-icon,
    .icon {
      width: 1.5rem;
      height: 1.5rem;
      font-size: 1.5rem;
    }
  }

  &:disabled,
  &[aria-disabled="true"],
  &.prs-btn_disabled {
    background-color: var(--prs-c-gray-400);
    color: var(--prs-c-white);
    cursor: not-allowed;
  }

}

.prs-btn-primary {
  background-color: var(--prs-c-primary);
  color: var(--prs-c-white);

  &:hover,
  &.prs-btn_hover {
    background-color: var(--prs-c-primary-900);
  }

  &:focus-visible,
  &.prs-btn_focus {
    background-color: var(--prs-c-primary);
    outline-color: var(--prs-c-primary);
  }

  &.prs-btn-danger {
    background-color: var(--prs-c-danger);
    color: var(--prs-c-white);

    &:hover,
    &.prs-btn_hover {
      background-color: var(--prs-c-danger-800);
      color: var(--prs-c-danger-100);
    }

    &:focus-visible,
    &.prs-btn_focus {
      background-color: var(--prs-c-danger);
      outline-color: var(--prs-c-danger);
    }
  }

  &.prs-btn-success {
    background-color: var(--prs-c-success-900);
    color: var(--prs-c-white);

    &:hover,
    &.prs-btn_hover {
      background-color: var(--prs-c-success-950);
      color: var(--prs-c-white);
    }

    &:focus-visible,
    &.prs-btn_focus {
      background-color: var(--prs-c-success-900);
      outline-color: var(--prs-c-success-900);
    }
  }

  &:disabled,
  &[aria-disabled="true"],
  &.prs-btn_disabled {
    background-color: var(--prs-c-gray-400);
    color: var(--prs-c-white);
  }
}

.prs-btn-secondary {
  border-color: currentColor;
  background-color: transparent;
  color: var(--prs-c-primary);

  &:hover,
  &.prs-btn_hover {
    border-color: var(--prs-c-primary);
    background-color: var(--prs-c-primary-100);
    color: var(--prs-c-primary);
  }

  &:focus-visible,
  &.prs-btn_focus {
    background-color: inherit;
    outline-color: currentColor;
    color: var(--prs-c-primary);
  }

  &.prs-btn-danger {
    color: var(--prs-c-danger-600);

    &:hover,
    &.prs-btn_hover {
      border-color: var(--prs-c-danger-800);
      background-color: var(--prs-c-danger-100);
      color: var(--prs-c-danger-800);
    }

    &:focus-visible,
    &.prs-btn_focus {
      background-color: inherit;
      outline-color: currentColor;
      color: var(--prs-c-danger);
    }
  }

  &.prs-btn-success {
    color: var(--prs-c-success-900);

    &:hover,
    &.prs-btn_hover {
      border-color: var(--prs-c-success-950);
      background-color: var(--prs-c-success-200);
      color: var(--prs-c-success-950);
    }

    &:focus-visible,
    &.prs-btn_focus {
      background-color: inherit;
      outline-color: currentColor;
      color: var(--prs-c-success);
    }
  }

  &:disabled,
  &[aria-disabled="true"],
  &.prs-btn_disabled {
    border-color: currentColor;
    background-color: transparent;
    color: var(--prs-c-gray-500);
  }
}

.prs-btn-tertiary {
  background-color: transparent;
  color: var(--prs-c-primary);

  &:hover,
  &.prs-btn_hover {
    border-color: currentColor;
    color: var(--prs-c-primary);
    text-decoration: underline;
  }

  &:focus-visible,
  &.prs-btn_focus {
    border-color: transparent;
    background-color: inherit;
    text-decoration: none;
    outline-color: currentColor;
  }

  &.prs-btn-danger {
    color: var(--prs-c-danger-600);
  }

  &.prs-btn-success {
    color: var(--prs-c-success-900);
  }

  &:disabled,
  &[aria-disabled="true"],
  &.prs-btn_disabled {
    border-color: transparent;
    background-color: transparent;
    color: var(--prs-c-gray-500);
    text-decoration: none;
  }
}

Coming soon...