Design system

Button

Bundle size
: 1.96 kB
Install: 
npm install @washingtonpost/wpds-button
|Copy
Usage: 
import { Button } from "@washingtonpost/wpds-button"
|Copy

Table of Contents

Anatomy

Note: Image is not to scale

  1. Icon
  2. Background Fill
  3. Text

Types

Text buttons

Text buttons are buttons that use text paired with or without an icon.

Icon buttons

An icon button is a button that uses only an icon.

Options

Variant

There are 3 variants available primary secondary & cta.

isOutline

Adding the property isOutline will set the button appearance as an outline.

Density

There are two options for the property density compact and default.

Behavior

Disabled

Guidance

Avoid small width buttons

Buttons do not have a minimum width but should still avoid being smaller than 120px.

Mixing button densities

Buttons within the same layout should have the same density.

Button without borders

Buttons can have no borders, but will need to be manually applied.

Accessiblity

Pair icons with text

When possible use text button with an icon. The pairing of text acts as a label to help contextualize the action being taken when clicked/tapped.

API Reference
PropDescriptionTypeDefaultRequired
variant
enum
primary | secondary | cta
----False
density
enum
compact | default
----False
isOutline
enum
boolean | true | false
----False
icon
enum
center | none | left | right
----False