Button Icon¶
Use button icon element to insert a button with an additional icon inside.
Structurally .btn-icon contains following elements:
.btn-icon__icon
And following modifiers:
.btn-icon_l.btn-icon_s.btn-icon_xs.btn-icon_primary.btn-icon_primary-disabled.btn-icon_secondary.btn-icon_secondary-disabled.btn-icon_outline.btn-icon_outline-disabled.btn-icon_ghost.btn-icon_ghost-disabled.btn-icon_join-right.btn-icon_join-left
Examples¶
Storefront theme provides predefined stylings for four buttons those are: primary, secondary, outline and ghost button.
HTML
<button class="btn-icon btn-icon_primary">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_secondary">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_outline">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_ghost">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
Button tags¶
The .btn-icon classes where designed to be used with <button> or <a> elements. However, you can use them with any element. Eg. <div> or <span>. You should remeber to add appropriate attribute to such elements `role="button" to tell assistive technologies such as screen readers what purpose the element serves.
Primary buttons¶
Used for primary actions (eg. Buy product, go to checkout). They come with four different sizes (like any other buttons)
HTML
<button class="btn-icon btn-icon_primary btn-icon_l">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_primary btn-icon_s">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_primary">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_primary btn-icon_xs">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
Secondary buttons¶
HTML
<button class="btn-icon btn-icon_secondary btn-icon_l">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_secondary btn-icon_s">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_secondary">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_secondary btn-icon_xs">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
Outline buttons¶
HTML
<button class="btn-icon btn-icon_outline btn-icon_l">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_outline btn-icon_s">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_outline">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_outline btn-icon_xs">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
Ghost buttons¶
HTML
<button class="btn-icon btn-icon_ghost btn-icon_l">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_ghost btn-icon_s">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_ghost">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_ghost btn-icon_xs">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
Disabled state¶
Each button may be disabled. Styles make buttons look visually disabled, but they are still clickable. To make them unclickable, add disabled attribute to the button or aria-disabled="true" to other elements which don't support disabled attribute.
HTML
<button class="btn-icon btn-icon_primary-disabled">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_secondary-disabled">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_outline-disabled">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
<button class="btn-icon btn-icon_ghost-disabled">
<svg class="icon btn-icon__icon">
<use xlink:href="/assets/img/icons/symbol-defs.svg#icon-search"></use>
</svg>
</button>
LESS¶
You can modify any button icons less variable in your User Less section to change button styles.
Button Icon variables¶
Variables used to style button icons.
@btnBorderWidth: 1;
@btnBorderStyle: solid;
@btnBorderColor: transparent;
@btnBorderRadius: @globalBorderRadius;
@btnLineHeight: 18;
@btnIconGutter: @buttonsGutter * 0.625;
@btnFontSizeInPxL: @fontSizeInPxL;
@btnPaddingTopL: 9;
@btnPaddingRightL: 24;
@btnPaddingBottomL: 9;
@btnPaddingLeftL: 24;
@btnFontSizeInPxM: @fontSizeInPxM;
@btnPaddingTopM: 7;
@btnPaddingRightM: 20;
@btnPaddingBottomM: 7;
@btnPaddingLeftM: 20;
@btnFontSizeInPxS: @fontSizeInPxS;
@btnPaddingTopS: 7;
@btnPaddingRightS: 16;
@btnPaddingBottomS: 7;
@btnPaddingLeftS: 16;
@btnFontSizeInPxXS: @fontSizeInPxXS;
@btnPaddingTopXS: 5;
@btnPaddingRightXS: 10;
@btnPaddingBottomXS: 5;
@btnPaddingLeftXS: 10;
@btnPaddingIcon: 9;
@btnFontSizeInPxIcon: @btnFontSizeInPxL;
@btnBgColorPrimary: @primaryColor;
@btnColorPrimary: @neutralColors0;
@btnBgColorPrimaryHover: darken(@btnBgColorPrimary, 14.5%);
@btnColorPrimaryHover: @btnColorPrimary;
@btnBgColorPrimaryDisabled: @primaryColors300;
@btnColorPrimaryDisabled: @neutralColors0;
@btnBgColorSecondary: @primaryColors50;
@btnColorSecondary: @primaryColor;
@btnBgColorSecondaryHover: darken(@btnBgColorSecondary, 14.5%);
@btnColorSecondaryHover: @btnColorSecondary;
@btnBgColorSecondaryDisabled: @primaryColors50;
@btnColorSecondaryDisabled: @primaryColors200;
@btnBgColorSpecial: @primaryColors900;
@btnColorSpecial: @neutralColors0;
@btnBgColorSpecialHover: lighten(@btnBgColorSpecial, 7.4%);
@btnColorSpecialHover: @btnColorSpecial;
@btnBgColorSpecialDisabled: @neutralColors400;
@btnColorSpecialDisabled: @btnColorSpecial;
@btnOutlineColor: @neutralColors300;
@btnBgColorOutline: inherit;
@btnColorOutline: @neutralColors700;
@btnBgColorOutlineHover: fade(@btnBorderColorOutline, 30%);
@btnColorOutlineHover: @neutralColors900;
@btnBorderWidthOutline: @btnBorderWidth;
@btnBorderColorOutline: @btnOutlineColor;
@btnBgColorOutlineDisabled: transparent;
@btnColorOutlineDisabled: @btnOutlineColor;
@btnBorderColorOutlineHover: @neutralColors500;
@btnBgColorGhost: transparent;
@btnColorGhost: @primaryColor;
@btnColorGhostHover: darken(@btnColorGhost, 14.5%);
@btnBgColorGhostHover: transparent;
@btnBgColorGhostDisabled: transparent;
@btnColorGhostDisabled: @neutralColors300;
@btnBgColorIcon: @neutralColors50;
@btnColorIcon: @globalFontColorSecondary;
@btnBgColorIconHover: @neutralColors100;
@btnIconPaddingL: 15;
@btnIconPaddingM: 11;
@btnIconPaddingS: 9;
@btnIconPaddingXs: 7;
If you want to change button styles, you can just change the variables. To change default padding for xs button icons just modify @btnIconPaddingXs variable.
Button Icon mixins¶
Those mixins are used to create button icon variants.
.btn-decorate-appearance (@bgColor: transparent, @color: @btnColorPrimary, @borderColor: transparent) {
background-color: @bgColor;
color: @color;
border-color: @borderColor;
fill: @color;
stroke: @color;
}
.btn-decorate-size (@fontSize, @paddingT, @paddingR, @paddingB, @paddingL, @lineHeight) {
.font-size(@fontSize);
.line-height(@lineHeight);
.padding-to-unit(@paddingT, @paddingR, @paddingB, @paddingL);
}
If you want to create XL button varuabt you can use mixins .btn-icon-decorate-size (You have to provide those variables)
.btn-icon {
&_xl {
.btn-icon-decorate-size(@btnIconFontSizeInPxXl, @btnIconPaddingTopXL, @btnIconPaddingRightXl, @btnIconPaddingBottomXl, @btnIconPaddingLeftXl, @lineHeightInPxXl);
}
}
or create success button icon variant.
.btn-icon {
&_success {
.btn-icon-decorate-appearance(@btnIconBgColorSuccess, @btnIconColorSuccess);
}
}
Button Icon styles¶
Here are standard button icon styles.
.btn-icon {
transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: @baseFontFamilyName;
text-decoration: none;
border: ~'@{btnBorderWidth}px' @btnBorderStyle @btnBorderColor;
border-radius: ~'@{btnBorderRadius}px';
user-select: none;
cursor: pointer;
.weight-semibold();
.line-height(@btnLineHeight);
.btn-decorate-size(@btnFontSizeInPxM, @btnIconPaddingM, @btnIconPaddingM, @btnIconPaddingM, @btnIconPaddingM, @lineHeightInPxM);
&_l {
.btn-decorate-size(@btnFontSizeInPxL, @btnIconPaddingL, @btnIconPaddingL, @btnIconPaddingL, @btnIconPaddingL, @lineHeightInPxL);
}
&_s {
.btn-decorate-size(@btnFontSizeInPxS, @btnIconPaddingS, @btnIconPaddingS, @btnIconPaddingS, @btnIconPaddingS, @lineHeightInPxS);
}
&_xs {
.btn-decorate-size(@btnFontSizeInPxXS, @btnIconPaddingXs, @btnIconPaddingXs, @btnIconPaddingXs, @btnIconPaddingXs, @lineHeightInPxXS);
}
&_primary {
.btn-decorate-appearance(@btnBgColorPrimary, @btnColorPrimary);
&:hover {
background-color: @btnBgColorPrimaryHover;
}
&-disabled {
.btn-decorate-appearance(@btnBgColorPrimaryDisabled, @btnColorPrimaryDisabled);
}
}
&_secondary {
.btn-decorate-appearance(@btnBgColorSecondary, @btnColorSecondary);
&:hover {
background-color: @btnBgColorSecondaryHover;
}
&-disabled {
.btn-decorate-appearance(@btnBgColorSecondaryDisabled, @btnColorSecondaryDisabled);
}
}
&_outline {
.btn-decorate-appearance(@btnBgColorOutline, @btnColorOutline, @btnBorderColorOutline);
border-width: ~'@{btnBorderWidthOutline}px';
&:hover {
color: @btnColorOutlineHover;
border-color: @btnBorderColorOutlineHover;
}
&-disabled {
.btn-decorate-appearance(@btnBgColorOutlineDisabled, @btnColorOutlineDisabled, @btnBorderColorOutline);
}
}
&_ghost {
.btn-decorate-appearance(@btnBgColorGhost, @btnColorGhost);
&:hover {
color: @btnColorGhostHover;
background-color: @btnBgColorGhostHover;
}
&-disabled {
.btn-decorate-appearance(@btnBgColorGhostDisabled, @btnColorGhostDisabled);
}
}
&_join-right {
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&_join-left {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&__icon {
stroke: inherit;
}
}