Skip to main content Skip to navigation Skip to search

Inline Button

Inline buttons are used inside and alongside textual content within Clarity components.

Usage

Inline buttons give action buttons a less prominent, yet familiar, visual presence. Use them with caution, however, because they can be easily confused with links.

This is a paragraph of text. This paragraph of text is going to be extended so that we can show how an inline button would fit into textual content. The inline button at the end of this paragraph looks like a link. But it is actually a button! This is an inline button

Inline buttons look like links. Clarity recommends avoiding the use of inline buttons outside of paragraphs and text content. Because the inline buttons look so much like links, it can be easy to confuse users.

Button Text

Clarity recommends using a clear call-to-action within the inline button because of the increased likelihood of confusing users with links vs. buttons.

Placement

Clarity recommends placing inline buttons at the end of a paragraph or block of text. Placing an inline button inside of a paragraph or by itself is not recommended.

Inline buttons should be used alongside blocks of text. The ideal placement is at the end of a paragraph. This is an inline button

ok

Do

Use buttons outside of blocks of text and only use inline buttons inside blocks of text as needed.

Inline buttons should be used alongside blocks of text.

This inline button may not make sense here
OK

Don't

Use inline buttons outside of text content or in place of regular buttons.