Inline buttons are used inside and alongside textual content within Clarity components.
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!
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.
Clarity recommends using a clear call-to-action within the inline button because of the increased likelihood of confusing users with links vs. buttons.
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.
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.
Don't
Use inline buttons outside of text content or in place of regular buttons.