A utility to help manage focus styles in an interactive component. Wrap the contents of your component in <span className="c-inner" tabindex="-1">Text</span> or <div className="c-inner" tabindex="-1">Text</div> to only show focus styles on keyboard interaction and not click.
To disable style output from this utility set
$enable-c-inner: false;.
Examples
Buttons
.btn.btn-unstyled Anchor Anchor Anchor Anchor Anchor Anchor Small Large es-ES es-ES es-ES <button className ="btn btn-primary" type ="button" >
<span className ="c-inner" tabindex ="-1" >Primary</span >
</button > Links
.component-subtitle a
Primary Secondary Primary Secondary <a href ="/" >
<span className ="c-inner" tabindex ="-1" >Regular Anchor Tag</span >
</a > Close
× × × × <button aria-label ="Close" className ="close" type ="button" >
<span className ="c-inner" tabindex ="-1" >
<svg
className ="lexicon-icon lexicon-icon-times"
focusable ="false"
role ="presentation"
>
<use xlink:href ="/images/icons/icons.svg#times" />
</svg >
</span >
</button >
<a aria-label ="Close" className ="close" href ="javascript:;" role ="button" >
<span className ="c-inner" tabindex ="-1" >
<svg
className ="lexicon-icon lexicon-icon-times"
focusable ="false"
role ="presentation"
>
<use xlink:href ="/images/icons/icons.svg#times" />
</svg >
</span >
</a > Show code Badge
Primary ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre <a className ="badge badge-primary" href ="javascript:;" >
<span className ="c-inner" tabindex ="-1" >
<span className ="badge-item badge-item-expand" >Primary</span >
</span >
</a > Label
Primary Secondary Normal Label Label Lg Label Secondary Label Primary <a className ="label label-primary" href ="javascript:;" >
<span className ="c-inner" tabindex ="-1" >
<span className ="label-item label-item-expand" >Primary</span >
</span >
</a > Breadcrumb
Page ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual Active Card Interactive
Widget Page Build a page by adding widgets and content.
Widget Page Build a page by adding widgets and content.
Dropdown
Bootstrap’s Dropdown Plugin focuses dropdown-toggle on show. You
will need to manually undo the focus via blur or focus c-inner on
show.
<div className ="dropdown" >
<button
aria-expanded ="false"
aria-haspopup ="true"
className ="link-outline link-outline-primary dropdown-toggle"
data-toggle ="dropdown"
id ="dropdownSites1"
type ="button"
>
<span className ="c-inner" tabindex ="-1" >
Dropdown
<svg
className ="lexicon-icon lexicon-icon-caret-bottom"
focusable ="false"
role ="presentation"
>
<use xlink:href ="/images/icons/icons.svg#caret-bottom" />
</svg >
</span >
</button >
<ul aria-labelledby ="dropdownSites1" className ="dropdown-menu" >
<li >
<a className ="dropdown-item" href ="javascript:;"
><span className ="c-inner" tabindex ="-1" >Download</span ></a
>
</li >
<li >
<a className ="dropdown-item" href ="javascript:;"
><span className ="c-inner" tabindex ="-1" >Edit</span ></a
>
</li >
<li >
<a className ="dropdown-item" href ="javascript:;"
><span className ="c-inner" tabindex ="-1" >Move</span ></a
>
</li >
<li >
<a className ="dropdown-item" href ="javascript:;"
><span className ="c-inner" tabindex ="-1" >Checkout</span ></a
>
</li >
<li >
<a className ="dropdown-item" href ="javascript:;"
><span className ="c-inner" tabindex ="-1" >Permissions</span ></a
>
</li >
<li >
<a className ="dropdown-item" href ="javascript:;"
><span className ="c-inner" tabindex ="-1" >Move to Recycle Bin</span ></a
>
</li >
</ul >
</div > Show code Edit this page on GitHub Contributors
Matuzalém Teles
Last edited May 9, 2025 at 6:15:38 AM
