Buttons and Links

Author: Bekah Stephens | Last edit: May 18, 2023 | Design type: Buttons and links | Product area: Hybrid Cloud Console

Floating buttons

If you have one or more buttons on a page that either do not have a toolbar to place them in or are not a CTA on an empty state, you will have a few options depending on the number of buttons you have. 

If you have just one button

Place on the top right as a secondary button, or as an icon + text link button in the case of a button that is usually presented as an icon (ie: an export button).

If you have more than one button

Place on the top right as a kebab menu, with each action button being a menu item.

Labeling buttons

Button labels should be kept short and concise, specifically when they are used for an action (edit, remove, delete etc).

The reasoning behind this is that if what you are ‘editing’, ‘removing’, ‘deleting’, etcetera, is clear based on the context, then you shouldn’t need the extra information of what you would be performing these actions on.

Example 1: “Remediate” button wording

When doing super picky UI reviews, we came across an inconsistency with Remediate text in buttons. In some cases it said “Remediate with Ansible”, while in others it simply said “Remediate”, with or without an icon.

In this case, what it should be is “Remediate” with an icon instead of the words.

Example of active state and disabled state:

Example 2: “Remove” buttons in RBAC

We debated whether to say “Remove from group” or just “Remove”. We decided to go with remove because it was clear from the context of the page what was being removed, and what from.

In this example, it is clear that the user would be removing a member from the group “test”.

"Delete" and "Remove" buttons

There are 3 ways of presenting Delete or Remove buttons:

1. Red danger button
2. Secondary button
3. Regular black menu item

Quick cheat sheet for when to use which one:

Rules and examples:

1. The only time you should ever use a Red danger button for a “Delete”/”Remove” button is inside a confirmation modal. Learn more about modals here.

2. Delete buttons that are not hidden inside a kebab should be presented in a secondary button format.

3. Buttons inside a kebab should never be red. They should ALWAYS be black, just like every other menu item in a dropdown menu.

Link buttons (icon vs. no icon)

Link buttons should be used to link a user to a different page, or to spark an action (eg: download). Depending on the use case, you may have an icon or not, and you may link to a new tab or not.

When to add an icon to your link button

• USE an icon when you are taking them somewhere OUTSIDE of c.rh.c (this should open a new tab)

• DO NOT use an icon when you are taking them somewhere else within c.rh.c (this may or may not open a new tab (guidelines for this can be found here)

When to have the icon on the left vs. on the right

• Place the icon on the LEFT when the link is for an action (example: download)

• Place the icon on the RIGHT when you are linking to a different site outside of c.rh.c.

Links inside a paragraph (may depend on use case)

When you have links inside a paragraph, the same rules apply. 

• If you are linking somewhere within c.rh.c, you do not need an icon
• If you are linking somewhere outside of c.rh.c, you should have an icon to the right, especially if the link as at the end of a sentence

Example 1:

Here we are linking out to access.redhat.com, so we have added an icon at the end of the link.

Example 2:

In this example, an issue should be filed to add an icon, as the link links out externally (outside of cloud.redhat.com).