Windy CSS styleguide

3.5 #components.button .button

Toggle example guides Toggle HTML markup

Button inherits its size from parent element, or you can use our general .size- classes.

Use class button--loading to show loader or --variant, --border or --weight-bold modifiers.

You can combine button with our handy data-icon="" attribute. Works well with our .disabled or .boxshadow class.

    <div class="button button--variant-red size-m">Button</div>
Examples
Default styling
Button
Button
With icon
Bold
Disabled
With shadow
.button--border-red-light
light red border and transparent background
Button
Button
With icon
Bold
Disabled
With shadow
.button--border-white
white border and transparent background
Button
Button
With icon
Bold
Disabled
With shadow
.button--border-gray
gray background and transparent background
Button
Button
With icon
Bold
Disabled
With shadow
.button--variant-red
red background
Button
Button
With icon
Bold
Disabled
With shadow
.button--variant-red-light
light red background
Button
Button
With icon
Bold
Disabled
With shadow
.button--variant-orange
red background
Button
Button
With icon
Bold
Disabled
With shadow
.button--weight-bold
bold font weight
Button
Button
With icon
Bold
Disabled
With shadow
.size-xs
font size 10px
Button
Button
With icon
Bold
Disabled
With shadow
.size-s
font size 12px
Button
Button
With icon
Bold
Disabled
With shadow
.size-m
font size 14px
Button
Button
With icon
Bold
Disabled
With shadow
.size-l
font size 16px
Button
Button
With icon
Bold
Disabled
With shadow
.size-xl
font size 18px
Button
Button
With icon
Bold
Disabled
With shadow
Markup 
<div class="centered">
            <div class="button [modifier class]">Button</div>
            <div class="button [modifier class] button--loading">Button</div>
            <div class="button [modifier class]" data-icon="<!-- @echo icon-umbrella-small -->">With icon</div>
            <div class="button [modifier class] button--weight-bold">Bold</div>
            <div class="button [modifier class] disabled">Disabled</div>
            <div class="button [modifier class] boxshadow">With shadow</div>
        </div>
Source: src/css/components/button.less, line 1