Red Hat design system

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.

Theme

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.

Spacing

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

Button