Usage
Component description
An in-line button is a lightweight action control that appears within content, text, or compact layouts. It allows users to perform an action without disrupting reading flow or competing with primary page actions.
Although it may visually resemble a Link, it behaves like a Button and performs an action rather than navigating to a destination.
When to use it
âś… Use this component when:
- An action needs to appear within text or supporting content.
- The action supports the user's current task but is not the primary action in the experience.
- Space is limited and a full button treatment would add unnecessary visual weight.
- The action is closely associated with nearby content.
- A text-styled trigger is more appropriate than a contained button (e.g., "Learn More", "View Details", "Try Again")
đźš« Do not use this component when:
- The action is the primary or most important action in the context.
- The action navigates to a different page or URL — use a Link component instead
- The action is destructive or high risk.
- A dismiss/close action is needed in a Side Sheet, Modal, Popover, or Toast — use the Dismiss Button instead.
- Multiple in-line actions are required in the same block of content.
Use in-line button to perform an action in a compact layout
Avoid using in-line buttons for navigation or as a stand-alone action item.
In-line Button vs Link
Rule of thumb:
→ Use an in-line button when the interaction performs an action within the current experience. Examples include copying content, opening a menu, launching a modal, retrying an operation, or updating data.
→ Use a link when the interaction navigates the user to another destination, such as a page, view, section, document, or external resource.
Use the Standard Link for stand-alone links that require an additional link icon.
Use the In-line Link for in-text redirecting links.
Use the In-line Button for on-page actions that don't redirect the user.
Opening a Modal
Choosing the right component
|
User Goal |
Component |
User Expectations |
|---|---|---|
|
Navigate to another page within the application |
Link |
"Take me somewhere" |
|
Navigate to an external website or system |
Link |
"Take me somewhere" |
|
Open supporting documentation |
Link |
"Take me somewhere" |
|
Open another application, product, or external system |
Link |
"Take me somewhere" |
|
Open a modal, drawer, or side sheet, dropdown |
In-line Button |
"Show something here" |
|
Copy content |
In-line Button |
“Perform an action” |
|
Retry an action |
In-line Button |
“Perform an action” |
|
Expand, reveal, or update content in place |
In-line Button |
“Change something here” |
|
Trigger a workflow without leaving the current page |
In-line Button |
“Perform an action” |
|
Open contextual details without changing pages |
In-line Button |
“Show something here” |
|
Show additional information inline ("View details", "Show more") |
In-line Button |
“Reveal something here” |
|
Open a confirmation dialog |
In-line Button |
“Confirm an action here” |