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

When to use

• For controls that expand truncated or collapsed content in place, such as a "Show more" control after truncated text, or an overflow count next to a group of avatars or chips.
• To open overlaying content from inside running text or alongside compact inline elements, such as an icon that triggers a popover.
• To trigger an action from within a sentence, such as copying a value.

When not to use

• For stand-alone actions that don't relate to the surrounding text, such as a "Submit" button in a dialog. Use Button instead.
• For links that navigate to another page or view. Use Link or ExternalLink instead.
• In combination with other InlineButton components, as a substitute for a toolbar or actions.

Color

InlineButton comes in five colors.

• Use neutral for most cases, such as actions that reveal or expand content.
• Use primary if the action needs to stand out or to match surrounding text. Use sparingly, as primary InlineButtons are easily mistaken for links.
• Use success, warning, or critical if the action's semantics match or to align with surrounding text.

Content guidelines

• Do keep the actionable phrase short: preferably 1-3 words, so it reads as a natural part of the sentence.
• Don't make the entire sentence the button. Keep the interactive phrase specific to the action.
• Do start the label with a verb describing the action, such as "Refresh" or "Show more".
• Don't use vague words such as "Click here" or "This". Make the button label descriptive.