Anatomy
Note: Image is not to scale
- Icon
- Background Fill
- 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
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| variant | "cta" | "secondary" | "primary" | ({ "@reducedMotion"?: "cta" | "secondary" | "primary"; "@hover"?: "cta" | "secondary" | "primary"; "@sm"?: "cta" | "secondary" | "primary"; "@md"?: "cta" | "secondary" | "primary"; ... 20 more ...; "@initial"?: "cta" | ... 1 more ... | "primary"; } & { ...; }) | ---- | False | |
| density | "default" | "compact" | ({ "@reducedMotion"?: "default" | "compact"; "@hover"?: "default" | "compact"; "@sm"?: "default" | "compact"; "@md"?: "default" | "compact"; "@lg"?: "default" | "compact"; ... 19 more ...; "@initial"?: "default" | "compact"; } & { ...; }) | ---- | False | |
| isOutline | boolean | "true" | "false" | ({ "@reducedMotion"?: boolean | "true" | "false"; "@hover"?: boolean | "true" | "false"; "@sm"?: boolean | "true" | "false"; "@md"?: boolean | "true" | "false"; ... 20 more ...; "@initial"?: boolean | ... 1 more ... | "false"; } & { ...; }) | ---- | False | |
| icon | "left" | "right" | "center" | "none" | ({ "@reducedMotion"?: "left" | "right" | "center" | "none"; "@hover"?: "left" | "right" | "center" | "none"; "@sm"?: "left" | "right" | "center" | "none"; ... 21 more ...; "@initial"?: "left" | ... 2 more ... | "none"; } & { ...; }) | ---- | False | |
| as | WPDS provides an as prop for changing which tag a component outputs. | never | ---- | False |
| css | WPDS 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 |