Skip to main content

InlineButton

    InlineButton is an inline, text-flowing action trigger. It flows with surrounding text, wraps naturally across line breaks, and supports color, loading, and disabled/aria-disabled states. Use the as prop to render a different underlying element.

    OverviewPropertiesUsageAccessibilityChangelog

    Import​

    import { InlineButton } from '@dynatrace/strato-components/buttons';

    Demo​

    InlineButton sits inside a line of surrounding text instead of separately in a standalone block.

    Add prefix and suffix icons​

    A prefix or suffix icon reinforces what the InlineButton action does, for example, signaling that there's more detail or a menu. Icons are sized automatically to match the surrounding text.

    Use an icon only​

    Some contexts don't have room for a label, such as a small trigger next to a metric or heading. Wrap the icon alone in InlineButton.Prefix or InlineButton.Suffix and add an aria-label, since there's no visible text to fall back on for the accessible name. See the Accessibility tab for more details.

    Change color​

    Use color to match the inline action's emphasis to its context, such as flagging a destructive action inline in a confirmation message.

    Disable​

    Disable an inline action while the surrounding content isn't ready for it yet, such as a control that depends on data that's still loading elsewhere on the page.

    Set loading state​

    Set loading while the action triggered by the inline button is still running, so users get feedback without losing their place in the surrounding text.

    Still have questions?
    Find answers in the Dynatrace Community