Container: The component container's background color and borders change per variant and state.
Icon: Button icons can be leading or trailing and help emphasize functionality. Buttons can be icon-only.
Label: The Button's label describes its functionality.

As design trends have evolved over time, it's become more commonplace to style hyperlinks similarly to buttons. This is helpful for creating eye-catching calls-to-action but may encourage button misuse. It's important to know the fundamental difference between buttons and hyperlinks as they are not functionally interchangeable:

Buttons are primarily used to perform an action on the current page such as opening a modal or drawer or submitting a form.
Hyperlinks, also known as links or anchors, use URLs to navigate to a new location, download a file, or link to an email address or phone number.

While we provide the flexibility for Buttons to function as links, we recommend understanding your particular use cases to make the most informed decision.

Best practices

Color

Button colors follow our branding theme. We recommend using Buttons for their intended purposes, not to fit a particular application theme.

Don't: Use Button variants or states to fit a color theme.

Importance

Primary Buttons serve the purpose of highlighting the most important action a user may take on the current page. When placing Buttons in forms or where users are expected to complete a task, be mindful to set each action at the most appropriate importance level. Actions are displayed from most to least important starting from right to left.

Avoid placing more than one Primary Button within a workflow or page.

Do: Consider actions by importance.

Don't: Use two Primary Buttons together.

Types

Regular

Regular Buttons are used most often. They always include a label and may include an icon.

Icon

Icon-only Buttons may be used in more condensed layouts. They are typically used to open menus or dropdowns.

Link

Buttons can be used as links in cases where they serve as CTAs.

Appearance

Variants

Primary

Primary Buttons are used for the most important action a user can take on the page, including CTAs and form submission. There should be only one primary per page.

Secondary

Secondary Buttons are used for lesser important actions. Multiple may be used on a page.

Tertiary

Tertiary Buttons represent the least important action.

Icons

Icons are used to give extra visual context to a Button.

Positioning

By default, they're placed before the label as a leading icon but can be placed after as a trailing icon.

Icon position

Icons can be either leading or trailing.

Custom icons

Custom icons may be used if the icon does not exist within the Pluma icon library. The sizing will match Pluma's icons. Be aware of how the custom icon's color and style will interact with each Button variant's background color.

Custom icons

Custom icons may be added as a source.

Sizes

Buttons are available in two sizes: medium and small.

Medium

Medium is the default size used in the majority of cases.

Small

Small Buttons are used for smaller screen sizes and less prominent actions on the page.

Behaviors

States

Base

The base Button uses the primary, secondary, and tertiary colors when no user interaction is detected.

Loading Buttons communicate to the user that some background task is in progress.

Hover

On mouse hover, Button styles update to hover colors.

Focus

Focused Buttons receive the standard 2px light blue outline.

Active

Button styles update on user activation.

Disabled

Disabled Buttons cannot be interacted with. Lighter colors are used for all variants.

Danger

Danger Buttons receive the critical color treatment to denote destructive actions or errors.

Content

Start labels with a verb. Keep them short and succinct at 1–3 words. Be specific enough that the button is self-explanatory without surrounding context. Use sentence case and no period.

Use the below table for examples of effective label text.

table
Type	Pattern	Example
Primary action	`Verb` + `object`	Create campaign
Destructive	Delete + `object`	Delete segment
Irreversible	Permanently delete + `object`	Permanently delete campaign
Cancel	Cancel	Cancel
Save	Save / Save changes / Save and close	Save changes
Progressive	Forward-motion verb	Next, Continue
Dialog-triggering	`Verb`…	Export…
Loading state	Present participle…	Saving…

Do: Use sentence case.

Don't: Use title case.

Do: Start with specific action verbs.

Don't: Use generic labels that require surrounding context.

Do: Use specific verbs that describe the action.

Don't: Use generic verbs that need surrounding context.

Ellipsis

Add an ellipsis (…) when a button opens a dialog or requires additional input before the action completes. Do not use an ellipsis when the action is immediate, such as navigating to a new page.

Do: Use an ellipsis when an additional step is needed before the action completes.

Don't: Use an ellipsis when the action happens immediately.

AI

Buttons serve as an important starting point for a person to engage with our internal AI agent. Use common questions a person may have about Customer.io as a label to facilitate agent interaction.

Do: Use common questions about the product.

Button

Anatomy

Guidelines

Buttons vs Links

Best practices

Color

Importance

Types

Appearance

Variants

Icons

Positioning

Custom icons

Sizes

Behaviors

States

Content

Ellipsis

AI

On this page