Skip to main content
Design system

Button

Bundle size: 2.12 kB
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { Button } from "@washingtonpost/wpds-ui-kit"
|Copy
Storybook:  View on Storybook
Source:  View on Github

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

Button

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
asWPDS provides an as prop for changing which tag a component outputs.
never
----False
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS<{ sm: `(max-width: ${string})`; md: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; lg: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; xxl: `(min-width: calc(${string} + 1px)) and (max-width: ${string})`; notS...
----False