Button

Buttons allow users to perform an action when triggered. They feature a text label, a background or a border, and icons.

Examples of buttons

Buttons can be used in light and dark themes. There are a variety of styles to choose from depending on what users need to accomplish.

Naming button parts

Theme

Themes of buttons
Themes of buttons

Danger

Use for actions that are difficult or impossible to undo, like Delete. This style has the same hierarchy as the Primary style due to its destructive nature. Don’t use this style multiple times in the same area.

Danger, secondary

Use for less destructive actions, like Cancel. This style is lower in hierarchy than the Danger style and it should be placed on its right side. Don’t use this style multiple times in the same area unless necessary.

Danger, link

Use for secondary or general links. This style is lower in hierarchy than the Primary style and it can be used multiple times in the same area.

Primary

Use to group a list of links together in a grid. Only Brick styles can stretch to fit a container or a grid, otherwise the label padding stays the same in all other styles.

Secondary

Use to group a list of links with icons together in a grid. Only Brick styles can stretch to fit a container or a grid, otherwise the label padding stays the same in all other styles.

Tertiary

Use for tertiary or the least important links. This style is the lowest in hierarchy and it can be used multiple times in the same area.

Search

Use to trigger a less important video that will play in a modal. This style is the lowest in hierarchy and it can be used multiple times in the same area.

Disabled

Most styles will appear disabled if a task needs to be completed first. Don’t use multiple times in the same area unless necessary.

Link

Use for less important actions or group it to the right of other styles. This style has an invisible background and no border. It can be used multiple times in the same area.

Play

Use to trigger a video that will play in a Modal. Don’t use this style without a thumbnail image underneath or use a Default, video call to action instead.

Close

Use to close something, like an Alert. Don’t use this style multiple times in the same area.


A button is used to perform an action, like Submit or Delete, depending on the style. For example, use the Primary style to submit a form or the Danger style to delete something.

Action vs. navigation

Use a button only to perform an action and use a Call to action as a navigational element, like a link.

Text labels

Button text labels are written differently than call to action text labels. Button text labels should be short and clearly describe what the action is when triggered, like Download if a user wants to download something.

Button text labels

Disabled state

Most styles will appear disabled if an action is unavailable or if a task needs to be completed first.

Button disabled

Hierarchy

Buttons are ordered by hierarchy from left to right or sometimes top to bottom. Some styles can be used multiple times in the same area except for the Danger, Primary, Search, Play, and Close styles.

Button hierarchy

Grouping

Buttons can be grouped together by hierarchy from left to right or from top to bottom.

Buttons can be used in modals. The Link style can be used to the right of the Primary style to create greater visual hierarchy in between the two buttons.

Button grouping
Button grouping primary

Modal

Buttons can be used in modals. The Link style can be used to the right of the Primary style to create greater visual hierarchy in between the two buttons.

Button in modal

Don't write button text labels that are too expressive or ambiguous.

Button label problems

Don't use multiple Primary styles in the same area, that style is reserved to represent the one most important action.

Multiple primary buttons issue

Don’t use buttons to represent links. Use calls to action instead.

Buttons vs calls to action

Button vs. call to action

A button performs an action whereas a call to action directs users to another page or sometimes displays hidden content. For example, a call to action shouldn’t be used to submit a form and a button shouldn’t be used as a link.

A button can sometimes direct users to other pages, like being directed to a confirmation page after a form is submitted, but that's the result of a triggered action happening in the background. Buttons and calls to action can be used in the same area as long as the styles are used properly and perform the right functions.

Responsive design

Buttons maintain the same scale on desktop and mobile. If they stack, the alignment changes to centered and the order of hierarchy changes to top to bottom. If a button contains a background or a border, the text label stays centered if it’s really long and if it breaks to two lines, which is rare.


All styles have interaction states except if some styles are disabled.


Buttons use PatternFly 4 spacers to define spacing values between elements.

button spacing

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.