Inline Item

Table of Contents

Use the inline-item inline-item-before, inline-item inline-item-middle, and inline-item inline-item-after classes to provide consistent spacing between text and icons in elements such as links or buttons. This can also be used in other components that have inline content (e.g., badge and label).

For this component to function and space properly, the white space must be removed between text and icons from the markup inside the component. It’s generally easier to remove all white space inside the link, button, or component. In the examples below, whitespaces in button and link are slightly off and the link underline on hover is a bit wide.

Link Without Whitespace

linkwhy, but ok.
<a href="#1">
	<span className="inline-item inline-item-before"
		><svg
			className="lexicon-icon lexicon-icon-share"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share" /></svg></span
	>link<span className="inline-item inline-item-middle"
		><svg
			className="lexicon-icon lexicon-icon-question-circle"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#question-circle" /></svg></span
	><span className="inline-item inline-item-middle"
		><svg
			className="lexicon-icon lexicon-icon-question-circle"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#question-circle" /></svg></span
	><span className="inline-item inline-item-middle"
		><svg
			className="lexicon-icon lexicon-icon-question-circle"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#question-circle" /></svg></span
	>why, but ok.<span className="inline-item inline-item-after"
		><svg
			className="lexicon-icon lexicon-icon-add-cell"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#add-cell" /></svg
	></span>
</a>

Link With Whitespace

link
<a href="#1">
	<span className="inline-item inline-item-before">
		<svg
			className="lexicon-icon lexicon-icon-share"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#share" />
		</svg>
	</span>
	link
	<span className="inline-item inline-item-after">
		<svg
			className="lexicon-icon lexicon-icon-add-cell"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#add-cell" />
		</svg>
	</span>
</a>

Button Without Whitespace

<button className="btn btn-secondary" type="button">
	<span className="inline-item inline-item-before">
		<svg
			className="lexicon-icon lexicon-icon-plus"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#plus" />
		</svg>
	</span>
	Secondary
	<span className="inline-item inline-item-after">
		<svg
			className="lexicon-icon lexicon-icon-camera"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#camera" />
		</svg>
	</span>
</button>

Button With Whitespace

<button className="btn btn-secondary" type="button">
	<span className="inline-item inline-item-before">
		<svg
			className="lexicon-icon lexicon-icon-plus"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#plus" />
		</svg>
	</span>
	Secondary
	<span className="inline-item inline-item-after">
		<svg
			className="lexicon-icon lexicon-icon-camera"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#camera" />
		</svg>
	</span>
</button>

Close

A Button or Link for closing stuff.

Anchor

<a aria-label="Close" className="close" href="#1" role="button">
	<svg
		className="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</a>
<a
	aria-label="Close"
	className="close disabled"
	href="#1"
	role="button"
	tabindex="-1"
>
	<svg
		className="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</a>
<a aria-label="Close" className="close" href="#1" role="button">
	<span aria-hidden="true">×</span>
</a>
<a
	aria-label="Close"
	className="close disabled"
	href="#1"
	role="button"
	tabindex="-1"
>
	<span aria-hidden="true">×</span>
</a>

Button

<button aria-label="Close" className="close" type="button">
	<svg
		className="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</button>
<button aria-label="Close" className="close" disabled type="button">
	<svg
		className="lexicon-icon lexicon-icon-times"
		focusable="false"
		role="presentation"
	>
		<use href="/images/icons/icons.svg#times" />
	</svg>
</button>
<button aria-label="Close" className="close" type="button">
	<span aria-hidden="true">×</span>
</button>
<button aria-label="Close" className="close" disabled type="button">
	<span aria-hidden="true">×</span>
</button>
Edit this page on GitHub

Contributors

Matuzalém Teles

Last edited January 29, 2025 at 1:35:05 AM

Table of Contents