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>

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>

Destructive Buttons

Example
A destructive button and ghost destructive button with their disabled states.

HTML

<div class="pv-flex">
  <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>

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-ghost pv-button-small">Button</button>
<button type="button" class="pv-button-destructive pv-button-small">Button</button>
<button type="button" class="pv-button-ghost-destructive pv-button-small">Button</button>

Large Buttons

Large buttons have increased padding.

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-ghost pv-button-large">Button</button>
<button type="button" class="pv-button-destructive pv-button-large">Button</button>
<button type="button" class="pv-button-ghost-destructive pv-button-large">Button</button>

Buttons as Links

Example
A button styled like a link and a destructive button styled like a link, with their disabled versions.

HTML

<div class="pv-flex">
  <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 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-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>
<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>

Icon-only Button

When a button only includes an icon, the padding will be adjusted so that the button has a square aspect ratio.

Example
Buttons with icons only.

HTML

<button class="pv-button-primary">
  <svg aria-hidden="true" class="pv-icon">
    <title>calendar</title>
    <use xlink:href="#calendar"></use>
  </svg>
</button>
<button class="pv-button-secondary">
  <svg aria-hidden="true" class="pv-icon">
    <title>calendar</title>
    <use xlink:href="#calendar"></use>
  </svg>
</button>  
<button class="pv-button-ghost">
  <svg aria-hidden="true" class="pv-icon">
    <title>calendar</title>
    <use xlink:href="#calendar"></use>
  </svg>
</button>  
<button class="pv-button-destructive">
  <svg aria-hidden="true" class="pv-icon">
    <title>calendar</title>
    <use xlink:href="#calendar"></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>

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>