Button
Toggle example guides Toggle HTML markup
Le bouton fonctionne dans deux formats, le type liens <a> et le type actions <button>.
Dans les deux cas, il est possible d'avoir un texte plus long sur desktop et plus cours sur mobile via <span class="lg:show"> ..., d'avoir une icon svg, ou d'ajouter un tooltip
Par défaut, le bouton est "inline". Lorsqu'une class d'alignement est appliquée, le bouton devient "block".
<div class="blk-button">
<a href="#" class="button blk-button__link">
<span class="ico blk-button__icon" aria-hidden="true">
<svg></svg>
</span>
<span class="txt blk-button__label">
<span>Button text</span>
</span>
</a>
</div>
<div class="blk-button">
<button class="button blk-button__link">
<span class="ico blk-button__icon" aria-hidden="true">
<svg></svg>
</span>
<span class="txt blk-button__label">
<span class="lg:show">Desktop long text</span>
<span class="lg:hide">Mobile short text</span>
</span>
<span class="txt blk-button__tooltip">
<span>Additional tolltip informations if needed</span>
</span>
</button>
</div>
Markup: ../../../snippets/components/button.hbs
<div class="blk-button {{modifier_class}}">
<button type="button" id="navSheetTrigger" class="button blk-button__link tab-mobile-bottom-toggle"
aria-label="Open navigation menu" aria-controls="navSheet" aria-expanded="false">
<span class="ico blk-button__icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-menu" width="24" height="24" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<line x1="4" y1="8" x2="20" y2="8"></line>
<line x1="4" y1="16" x2="20" y2="16"></line>
</svg>
</span>
<span class="txt blk-button__label">
<span>Menu</span>
</span>
<span class="txt blk-button__tooltip">
<span>Tooltip text</span>
</span>
</button>
</div>
<div class="blk-button {{modifier_class}}">
<a href="tel:" class="button blk-button__link">
<span class="ico blk-button__icon" aria-hidden="true">
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-phone-outgoing" width="24" height="24" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z"></path>
<path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2">
</path>
<line x1="15" y1="9" x2="20" y2="4"></line>
<polyline points="16 4 20 4 20 8"></polyline>
</svg>
</span>
<span class="txt blk-button__label">
<span class="lg:show">0800.949.848</span>
<span class="lg:hide">Call</span>
</span>
</a>
</div>
<div class="blk-button {{modifier_class}}">
<a href="#" class="button blk-button__link">
<span class="txt blk-button__label">
<span>Button text</span>
</span>
</a>
</div>
Source:
src/cssframework_v2/less/components/button.less, line 1