Skip to main content

    Button

    Buttons let users trigger actions or events with a single click, or by pressing Enter or Space while the button has focus.

    OverviewPropertiesUsage

    When to use​

    • To trigger actions or events.
    • 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.

    When not to use​

    • To continue a user flow in another Dynatrace app, use IntentButton instead.
    • General navigation to another page within an app or view. Use Link instead.
    • Navigation to an external page. Use ExternalLink instead.

    Examples of Button, IntentButton, and Link components Examples of Button, IntentButton, and Link components

    Variants​

    Buttons come in three emphasis variants. The variants help to establish a visual hierarchy between actions.

    Examples of Button component variants Examples of Button components variants

    Default​

    • Use for common actions that don't require special attention.
    • The low visual emphasis 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. For example, a default Cancel button next to an accent Confirm button.

    Emphasized​

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

    Accent​

    • Use 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.
    • Use sparingly, ideally once per view or context.

    Colors​

    Buttons come in five colors, each with a unique semantic meaning.

    Examples of Button colors Examples of Button colors

    Neutral​

    • Use for common actions that shouldn't stand out.
    • Neutral has no semantic meaning and is, therefore, the default color.

    Primary​

    • Use for important actions that need to stand out. For example, a submit button in a form.
    • Use a maximum of one primary button per view or context to support a clear visual hierarchy.
    • If placing the primary button on a background (for example, in a Container), only use the primary-colored background.

    Success​

    • Don't use a success-colored button for positive or confirming actions** such as Submit or **Save.** Instead, use a primary-colored button.
    • If placing the success button on a background (for example, in a Container), only use the success-colored background.

    Warning​

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

    Critical​

    • Use for the final confirmation of a destructive action. For example, a Delete button in a dialog.
    • If placing the critical button on a background (for example, in a Container), only use the critical-colored background.

    Sizes​

    Buttons come in two sizes: default and condensed.

    Examples of Button sizes Examples of Button sizes

    Default​

    • Use in most cases. We designed it to work well with the other UI components and create a balanced look and feel.

    Condensed​

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

    Alignment on page​

    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​

    Example of button order Example of button order

    • Order buttons according to emphasis level when multiple buttons are next to each other.
    • If buttons should 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.
    • If using a menu trigger that contains more actions, always make it the last button.

    Content guidelines​

    Content elements of a button Content elements of a button

    1. Button label
    2. Prefix icon
    3. Suffix icon

    Button label​

    • Use sentence case (capitalize only the first word and any names). In the following example, the action deletes a user's workflow:

    Button content example 1 Button content example 1

    In the next example, the action opens the Notebooks app:

    Button content example 2 Button content example 2

    • Keep it short: just one to three words.
    • Remove unnecessary words such as “the”, “a”, or “an".
    • Don't use punctuation (no commas, ellipses, full stops, exclamations, or question marks).
    • Start with a verb describing the user's next action → [Verb] or [Verb]+[noun].

    Button content example 3 Button content example 3

    Button content example 4 Button content example 4

    Button content example 5 Button content example 5

    • Avoid vague labels, especially for warning and critical buttons.

    Button content example 6 Button content example 6

    Button content example 7 Button content example 7

    Button content example 8 Button content example 8

    • For restricted buttons (for example, due to missing permissions), use a tooltip to add more details.

    Prefix and suffix icons​

    • Only use icons if they visually support the action. Don't rely solely on an icon to convey meaning.

    Button content example 9 Button content example 9

    If the button opens another app, use IntentButton instead. In IntentButten, the icon of the app that will open appears before the label.

    Button content example 10 Button content example 10

    Still have questions?
    Find answers in the Dynatrace Community