Examples
Default styling
shout
Shout
discreet
Discreet
Markup
<button class="btn btn--[modifier class]">[modifier class] default</button>
<button class="btn btn--[modifier class] btn--hover">[modifier class] hover</button>
<button class="btn btn--[modifier class] btn--focus">[modifier class] focus</button>
<button class="btn btn--[modifier class] btn--active">[modifier class] active</button>
<button class="btn btn--[modifier class] btn--disabled">[modifier class] disabled</button>
<button class="btn btn--[modifier class] btn--confirmed">[modifier class] confirmed</button>
<button class="btn btn--[modifier class] btn--danger">[modifier class] danger</button><br><br>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist">[modifier class] default</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--hover">[modifier class] hover</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--focus">[modifier class] focus</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--active">[modifier class] active</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--disabled">[modifier class] disabled</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--confirmed">[modifier class] confirmed</button>
<button class="btn btn--[modifier class] btn--icon icon icon-wishlist btn--danger">[modifier class] danger</button><br><br>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist">[modifier class] default</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--hover">[modifier class] hover</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--focus">[modifier class] focus</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--active">[modifier class] active</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--disabled">[modifier class] disabled</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--confirmed">[modifier class] confirmed</button>
<button class="btn btn--[modifier class] btn--icon btn--plain icon icon-wishlist btn--danger">[modifier class] danger</button><br><br>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket"><span class="btn__text">[modifier class] default</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--hover"><span class="btn__text">[modifier class] hover</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--focus"><span class="btn__text">[modifier class] focus</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--active"><span class="btn__text">[modifier class] active</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--disabled"><span class="btn__text">[modifier class] disabled</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--confirmed"><span class="btn__text">[modifier class] confirmed</span><span class="btn__batch disturber">1</span></button>
<button class="btn btn--[modifier class] btn--icon btn--plain btn--batch icon icon-basket btn--danger"><span class="btn__text">[modifier class] danger</span><span class="btn__batch disturber">1</span></button>
Source:
assets/styles/02-atoms/04-base/_button.scss, line 1