Button

Buttons allow users to trigger actions or events with a single click anywhere within the button container. Users can also trigger a button by pressing Enter or Space while the button has focus.

OverviewPropertiesUsage

Variants

Buttons come in three emphasis levels that help to establish a visual hierarchy between actions.

Default

• Use the default variant for all common actions that don't require special attention.
• The low visual emphasis level blends seamlessly with the rest of the user interface, allowing users to focus on the main content.
• Alongside the accent variant, the default variant often triggers the opposite action. This circumstance is especially relevant for dialogs, such as a default Cancel button next to an accent Confirm button.

Emphasized

• Use the emphasized variant for buttons that need to stand out but aren't the most important actions in a view.
• Use one emphasized button per group of buttons at most.
• Don't combine emphasized and accent buttons in the same group of buttons.

Accent

• Use the accent variant for the most important action in a view or the main action to move forward in a user flow.
• Don't combine accent and emphasized buttons in the same button group.
• To establish a clear visual hierarchy, use accent buttons sparingly, ideally once per view or context.

Colors

Buttons come in five colors. Each of them has a different semantic meaning.

Neutral

• Use neutral-colored buttons for common actions that shouldn't stand out.
• The neutral color has no semantic meaning and is, therefore, the default color you should usually apply.

Primary

• Use primary-colored buttons for important actions that need to stand out. For example, a submit button in a form.
• Use one primary button per view or context at most to ensure a certain level of visual hierarchy.
• Always use the primary color when placing a button on a primary background, for example, buttons in a primary-colored Container.

Success

• Always use the success color when placing a button on a success background, for example, buttons in a success-colored Container.
• Avoid using success-colored buttons for positive or confirming actions like Submit or Save. Instead, use primary-colored buttons.

Warning

• Use warning-colored buttons for actions that trigger significant changes and could be harmful. For example, a Stop import button in a dialog or actions that could affect the cost of Dynatrace, such as Update query.
• Use warning-colored buttons to ensure that users pay special attention before triggering an action.
• Always use the warning color when placing a button on a warning background, for example, buttons in a warning-colored Container.

Critical

• Use critical-colored buttons for the final confirmation of a destructive action. For example, a Delete button in a dialog.
• Always use the critical color when placing a button on a critical background, for example, buttons in a critical-colored Container.

Sizes

Buttons come in two sizes: default and condensed.

Default

• Use the default size in most cases. We've designed it to work well with other user interface components and create a balanced look and feel.

Condensed

• Use the condensed size in compact layouts or when there isn't enough space for default-sized buttons, for example, for table row actions.

Alignment on pages

The alignment of a button in a view or container depends on the context.

• Align buttons left if they follow left-aligned content, for example, in a simple form or after a paragraph.
• Align buttons right to convey a sense of progression for the action triggered by the button, for example, in a Modal, wizard, or multi-step form.
• Align buttons right in all other cases. For example, if they're part of the AppHeader or the TitleBar.

Order

• Order buttons based on their emphasis level if multiple instances are next to each other.
• If buttons need to convey a sense of progression, order them from least important to most important (left to right). For example, in a Modal or Previous and Next buttons in a guided user flow.
• In all other cases, order buttons from most important to least important (left to right).
• Use Spacings.Size4 for gaps between buttons.
• Always place the menu trigger that contains more actions, if it exists, as the last button.

Button vs. Link

Button

• Use Buttons to trigger actions or events.
• In rare cases, buttons can have navigational purposes. For example, when links need to align visually with surrounding items or when the main actions in a view are links, such as Next or Previous buttons in a guided user flow.

IntentButton

• Use IntentButtons if users will continue a user flow in another Dynatrace app. Clicking the IntentButton triggers an overlay that lets users select an app to share data with.
• A common label for IntentButtons is Open with
• Read more about intents on the dedicated intents page

Link

• Use Links only for navigational purposes. For example, to navigate to another page within an app or view.

ExternalLink

• Use ExternalLinks to navigate users to an external page. For example, a third-party website or a Dynatrace Docs page.

Content guidelines

General

• The button text should be short. Try to use one to two words or a maximum of three words.
• Start with an active verb describing the user's next action.
• Use sentence case: Capitalize only the first letter.
• Don't add periods or exclamations. In general, avoid punctuation in button text.
• Use OK or Got it as the text for acknowledgment buttons.
• For disabled buttons, consider adding a short text to tell the user why the button isn't available to them. Use such texts sparingly.
• Clearly state the action and consequence for warning and critical buttons, but don't make it scary.

Use of icons

• If you use an icon, choose one with an appropriate meaning for the action.
• If you only use an icon and no text, add an arial-label for accessibility.