Buttons
button
s need a type
property, most likely type="button"
. If it is submitting a form, it needs type="submit"
. MDN Button DocumentationPrimary 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>
Icon Buttons
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>
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>