Home
Components
Buttons

Buttons

Accessibility note: all buttons need a type property, most likely type="button". If it is submitting a form, it needs type="submit". MDN Button Documentation

Primary Buttons

Example
A primary button and a disabled primary button.

HTML

<button type="button" class="pv-button-primary">Button</button>
<button type="button" class="pv-button-primary" disabled>Button</button>

Secondary Buttons

Example
A secondary button and a disabled secondary button.

HTML

<button type="button" class="pv-button-secondary">Button</button>
<button type="button" class="pv-button-secondary" disabled>Button</button>

Tertiary Buttons

Example
A tertiary button and a disabled tertiary button.

HTML

<button type="button" class="pv-button-tertiary">Button</button>
<button type="button" class="pv-button-tertiary" disabled>Button</button>

Primary Outline Buttons

Example
A primary outline button and a disabled primary outline button.

HTML

<button type="button" class="pv-button-primary-outline">Button</button>
<button type="button" class="pv-button-primary-outline" disabled>Button</button>

Secondary Outline Buttons

Example
A secondary outline button and a disabled secondary outline button.

HTML

<button type="button" class="pv-button-secondary-outline">Button</button>
<button type="button" class="pv-button-secondary-outline" disabled>Button</button>

Destructive Buttons

Example
A destructive button and a disabled destructive button.

HTML

<div class="pv-flex pv-stack-16">
  <button type="button" class="pv-button-destructive">Button</button>
  <button type="button" class="pv-button-destructive" disabled>Button</button>
</div>
<div class="pv-flex">
  <button type="button" class="pv-button-ghost-destructive">Button</button>
  <button type="button" class="pv-button-ghost-destructive" disabled>Button</button>
</div>

Ghost Buttons

Example
A ghost button and a disabled ghost button.

HTML

<button type="button" class="pv-button-ghost">Button</button>
<button type="button" class="pv-button-ghost" disabled>Button</button>

Buttons as Links

Example
A button styled like a link and a disabled button styled like a link.

HTML

<div class="pv-flex pv-stack-16">
  <button type="button" class="pv-button-link">Button</button>
  <button type="button" class="pv-button-link" disabled>Button</button>
</div>
<div class="pv-flex">
  <button type="button" class="pv-button-link-destructive">Button</button>
  <button type="button" class="pv-button-link-destructive" disabled>Button</button>
</div>

Button Sizes

Small Buttons

Small buttons have reduced padding.

Example
Small buttons of different types.

HTML

<button type="button" class="pv-button-primary pv-button-small">Button</button>
<button type="button" class="pv-button-secondary pv-button-small">Button</button>
<button type="button" class="pv-button-tertiary pv-button-small">Button</button>
<button type="button" class="pv-button-destructive pv-button-small">Button</button>
<button type="button" class="pv-button-primary-outline pv-button-small">Button</button>
<button type="button" class="pv-button-ghost pv-button-small">Button</button>
<button type="button" class="pv-button-ghost-destructive pv-button-small">Button</button>
<button type="button" class="pv-button-link pv-button-small">Button</button>
<button type="button" class="pv-button-link-destructive pv-button-small">Button</button>

Extra Small Buttons

Extra small buttons have their padding reduced even further. (Added for v2)

Example
Extra small buttons of different types.

HTML

<button type="button" class="pv-button-primary pv-button-xsmall">Button</button>
<button type="button" class="pv-button-secondary pv-button-xsmall">Button</button>
<button type="button" class="pv-button-tertiary pv-button-xsmall">Button</button>
<button type="button" class="pv-button-destructive pv-button-xsmall">Button</button>
<button type="button" class="pv-button-primary-outline pv-button-xsmall">Button</button>
<button type="button" class="pv-button-ghost pv-button-xsmall">Button</button>
<button type="button" class="pv-button-ghost-destructive pv-button-xsmall">Button</button>
<button type="button" class="pv-button-link pv-button-xsmall">Button</button>
<button type="button" class="pv-button-link-destructive pv-button-xsmall">Button</button>

Large Buttons

Large buttons have increased horizontal padding and a larger font size/line height.

Example
Large buttons of different types.

HTML

<button type="button" class="pv-button-primary pv-button-large">Button</button>
<button type="button" class="pv-button-secondary pv-button-large">Button</button>
<button type="button" class="pv-button-tertiary pv-button-large">Button</button>
<button type="button" class="pv-button-destructive pv-button-large">Button</button>
<button type="button" class="pv-button-primary-outline pv-button-large">Button</button>
<button type="button" class="pv-button-ghost pv-button-large">Button</button>
<button type="button" class="pv-button-ghost-destructive pv-button-large">Button</button>
<button type="button" class="pv-button-link pv-button-large">Button</button>
<button type="button" class="pv-button-link-destructive pv-button-large">Button</button>

Button with Icon

When including an icon before or after a button label, enclose the label text in a span element.

Example
Buttons with icon before and after label and disabled buttons with icon.

HTML

<button type="button" class="pv-button-primary">
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#add-circle"></use>
  </svg>
  <span>Button</span>
</button>
<button type="button" class="pv-button-primary">
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-primary" disabled>
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-secondary">
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#add-circle"></use>
  </svg>
  <span>Button</span>
</button>
<button type="button" class="pv-button-secondary">
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-secondary" disabled>
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-tertiary">
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
  <span>Button</span>
</button>
<button type="button" class="pv-button-tertiary">
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-tertiary" disabled>
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-destructive">
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
  <span>Button</span>
</button>
<button type="button" class="pv-button-destructive">
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-destructive" disabled>
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-primary-outline">
  <svg aria-hidden="true" class="pv-icon">
      <title>add-circle</title>
      <use xlink:href="#add-circle"></use>
    </svg>
  <span>Button</span>
</button>
<button type="button" class="pv-button-primary-outline">
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-primary-outline" disabled>
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-ghost">
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#add-circle"></use>
  </svg>
  <span>Button</span>
</button>
<button type="button" class="pv-button-ghost">
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>
<button type="button" class="pv-button-ghost" disabled>
  <span>Button</span>
  <svg aria-hidden="true" class="pv-icon">
    <use xlink:href="#arrow-forward"></use>
  </svg>
</button>

Inverse Buttons

Add the inverse button utility when using a primary button or a link button on a dark background.

Example
Buttons on a dark background.

HTML

<div class="pv-surface-brand pv-inset-square-32">
  <button type="button" class="pv-button-primary pv-button-inverse">Button</button>
  <button type="button" class="pv-button-secondary pv-button-inverse">Button</button>
  <button type="button" class="pv-button-secondary-outline pv-button-inverse">Button</button>
  <button type="button" class="pv-button-ghost pv-button-inverse">Button</button>
  <button type="button" class="pv-button-link pv-button-inverse">Button</button>
</div>

Use an icon button to make an icon clickable. You can adjust the size of the icon as needed or apply text color utilities. Be sure to include a title element inside the svg so that screen readers or hovering over the icon can indicate the function of the icon.

Example
An icon button.

HTML

<button type="button" class="pv-button-icon">
  <svg aria-hidden="true" class="pv-icon-24">
    <title>My Profile</title>
    <use xlink:href="#user-circle"></use>
  </svg>
</button>
  <button type="button" class="pv-button-icon" disabled>
    <svg aria-hidden="true" class="pv-icon-24">
      <title>My Profile</title>
      <use xlink:href="#user-circle"></use>
    </svg>
  </button>

Icon Button Outline

Use pv-button-icon-outline to wrap the svg in an outline. Adds a shadow on hover.

Example
An outlined button icon.

HTML

<button type="button" class="pv-button-icon-outline">
  <svg class="pv-icon" aria-hidden="true">
    <title>Expand Controls</title>
    <use xlink:href="#arrow-expand"></use>
  </svg>
</button>

Segmented Control

Example
A segmented control with four buttons.

HTML

<div class="pv-segmented-control">
  <button type="button" data-active>Button</button>
  <button type="button">Button</button>
  <button type="button" disabled>Button</button>
  <button type="button">Button</button>
</div>

Transformer Buttons

Use pv-button-transformer to show text within a span on :hover and :focus-visible. Note: Removing span from the text will remove transformation.

Example
A button that transforms on hover.

HTML

<button type="button" class="pv-button-transformer">
  <span>Collapse Controls</span>
  <svg class="pv-icon" aria-hidden="true">
    <use xlink:href="#arrow-collapse"></use>
  </svg>
</button>

Button Shadow

Adding pv-button-shadow can be used to add a shadow. Can be used for floating action buttons or otherwise sticky buttons.

Example
A button with a shadow.

HTML

<button type="button" class="pv-button-icon-outline pv-button-shadow">
  <span>Expand Controls</span>
  <svg class="pv-icon-16" aria-hidden="true">
    <use xlink:href="#arrow-expand"></use>
  </svg>
</button>

Floating Action Button

Use the floating action button to position a round button with icon in the bottom-right of a container. You must add .pv-relative on a parent container to set the context for where the floating action button is positioned. You can override the default positioning using custom properties.

Custom Property	Default Value	Description
`--bottom`	1rem (16px)	Distance from the bottom edge of the parent container
`--right`	1rem (16px)	Distance from the right edge of the parent container

Use .pv-button-floating on light backgrounds and .pv-button-floating-on-dark on dark backgrounds.

Example
A floating action button and disabled floating action button on light and dark backgrounds.

HTML

<div class="pv-inset-square pv-surface-accent pv-relative pv-border-bottom" style="height: 100px">
  <button class="pv-button-floating">
    <svg aria-hidden="true" class="pv-icon">
      <title>ai</title>
      <use xlink:href="#ai"></use>
    </svg>
  </button>
</div>
<div class="pv-inset-square pv-surface-accent pv-relative" style="height: 100px">
  <button class="pv-button-floating" disabled>
    <svg aria-hidden="true" class="pv-icon">
      <title>ai</title>
      <use xlink:href="#ai"></use>
    </svg>
  </button>
</div>
<div class="pv-inset-square pv-surface-brand pv-relative pv-border-bottom" style="height: 100px">
  <button class="pv-button-floating-on-dark">
    <svg aria-hidden="true" class="pv-icon">
      <title>ai</title>
      <use xlink:href="#ai"></use>
    </svg>
  </button>
</div>
<div class="pv-inset-square pv-surface-brand pv-relative" style="height: 100px">
  <button class="pv-button-floating-on-dark" disabled>
    <svg aria-hidden="true" class="pv-icon">
      <title>ai</title>
      <use xlink:href="#ai"></use>
    </svg>
  </button>
</div>

Alpha Button

Use the alpha button in the footer of the side nav to link to a new alpha feature. When the nav is collapsed or on small viewports, the button will respond accordingly.

Example
An alpha button for Analyze.

HTML

<button class="pv-alpha-button">
  <span>Analyze</span>
  <span>Alpha</span>
</button>