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
<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 > Show code Link With Whitespace
<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 > Show code 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 > Show code 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 > Show code 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 > Show code 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 > Show code Edit this page on GitHub Contributors
Matuzalém Teles
Last edited May 9, 2025 at 6:15:38 AM