Button
v0.0.0
Buttons allow users to take actions, and make choices, with a single act.
Basic modifications are set via .vi-btn, while more specialized modifications are defined in their own
classes. So all button have .vi-btn and a specialized class.
.vi-btn classes can be used directly <a> or <button> elements.
It can also be used on a <span> or <div> element where the direct parent is an <a> element.
Use the --nested modifier to act on the direct parent hover and focus state.
Standalone buttons
Following buttons can be used standalone or as part of other components.
Solid #
The solid buttons renders by default in the dominant brand color.
Use modifiers --accent-1, --accent-2, --accent-3 or --error to change the color.
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn">Pug locavore</a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Pitchfork paleo</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Sriracha vegan</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--error vi-btn">Paleo beard</a>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--accent-3 vi-btn">Occupy ramps</a>To make a button appear disabled, you can follow the instructions provided based on the type of button element you are using.
- For an HTMLButtonElement, you can use the
disabledattribute to disable the button. This will prevent the button from receiving any clicks or interactions. - For an HTMLAnchorElement, you can use the
.disabledclass to visually represent the button as disabled. However, this will not inherently disable the functionality of the link. You will need to prevent the default behavior of the link using JavaScript or with attributesaria-disabled="true"combined withtabindex="-1".
<!-- Button type: solid -->
<a aria-disabled="true" tabindex="-1" href="#" class="disabled vi-btn-solid vi-btn">Schlitz keytar</a>
<!-- Button type: solid -->
<button disabled type="button" class="vi-btn-solid vi-btn-solid--accent-1 vi-btn">Asymmetrical lo-fi</button>
<a aria-disabled="true" class="sg-demo-link" href="#sample" tabindex="-1">
<!-- Button type: solid -->
<div class="disabled vi-btn-solid vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Sriracha xoxo</div>
<span dir="ltr">[hover me]</span>
</a>To create the light version combine with modifier --light.
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--light vi-btn-solid--accent-1 vi-btn">Lumbersexual health</a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--light vi-btn-solid--accent-1 vi-btn">Retro microdosing</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--light vi-btn-solid--accent-1 vi-btn-solid--nested vi-btn">Chia artisan</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--light vi-btn-solid--accent-1 vi-btn-solid--no-pointer vi-btn">Intelligentsia williamsburg
<!-- Icon cross-sign (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg></a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--light vi-btn-solid--accent-1 vi-btn-solid--no-pointer vi-btn">Offal tofu
<!-- Icon cross-sign (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--light vi-btn-solid--accent-1 vi-btn-solid--no-pointer vi-btn-solid--nested vi-btn">Lomo umami
<!-- Icon cross-sign (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>To create small versions combine with modifier --sm.
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--sm vi-btn">Kitsch meggings</a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--sm vi-btn-solid--accent-1 vi-btn">Semiotics humblebrag</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--sm vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Post-ironic cornhole</div>
<span dir="ltr">[hover me]</span>
</a>To create large versions combine with modifer --lg.
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--lg vi-btn">Marfa mustache</a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-1 vi-btn">Vhs truffaut</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Letterpress salvia</div>
<span dir="ltr">[hover me]</span>
</a>To hide de pointer use modifier --no-pointer.
Solid buttons without pointer should only be used for actions (E.g. close, cancel or undo)
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Close</a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn">Cancel</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Undo</div>
<span dir="ltr">[hover me]</span>
</a>To add custom icons to the solid button use modifier --no-pointer.
Note that here the icons are using modifiers --button-start or --button-end.
Goth sriracha
Taxidermy bushwick
Vegan freegan
Asymmetrical banjo
Church-key austin
[hover me]
Pbr&b cold-pressed
Taxidermy bushwick
Farm-to-table poutine
[hover me]
Vegan freegan
Literally wolf
[hover me]
Asymmetrical banjo
Tousled mlkshk
[hover me]
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn"><!-- Icon plus-sign (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="plus-sign"><polygon points="10 6 6 6 6 2 5 2 5 6 1 6 1 7 5 7 5 11 6 11 6 7 10 7"></polygon></svg>
Goth sriracha</a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn"><!-- Icon video-play (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
Plaid tattooed</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
<!-- Icon cross-sign (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
Church-key austin</div>
<span dir="ltr">[hover me]</span>
</a>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--error vi-btn"><!-- Icon trash (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="trash"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M10,4 L9.5,12 L2.5,12 L2,4 L10,4 Z M8.935,5 L3.064,5 L3.439,11 L8.56,11 L8.935,5 Z"></path><polygon points="4.5 6 5.5 6 5.5 10 4.5 10"></polygon><polygon points="6.5 6 7.5 6 7.5 10 6.5 10"></polygon><path fill-rule="nonzero" d="M10.5,2 L11,5 L1,5 L1.5,2 L10.5,2 Z M9.652,3 L2.347,3 L2.18,4 L9.819,4 L9.652,3 Z"></path><path fill-rule="nonzero" d="M8,0 L8.5,3 L3.5,3 L4,0 L8,0 Z M7.152,1 L4.847,1 L4.68,2 L7.319,2 L7.152,1 Z"></path></g></svg>
Pbr&b cold-pressed</a>
<hr>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn">Taxidermy bushwick
<!-- Icon plus-sign (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="plus-sign"><polygon points="10 6 6 6 6 2 5 2 5 6 1 6 1 7 5 7 5 11 6 11 6 7 10 7"></polygon></svg></a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn">Pabst crucifix
<!-- Icon video-play (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Farm-to-table poutine
<!-- Icon cross-sign (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn"><!-- Icon plus-sign (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="plus-sign"><polygon points="14 8 8 8 8 2 7 2 7 8 1 8 1 9 7 9 7 15 8 15 8 9 14 9"></polygon></svg>
Vegan freegan</a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-1 vi-btn"><!-- Icon video-play (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
Freegan skateboard</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">
<!-- Icon cross-sign (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg>
Literally wolf</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<!-- Button type: solid -->
<a href="#" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn">Asymmetrical banjo
<!-- Icon plus-sign (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="plus-sign"><polygon points="14 8 8 8 8 2 7 2 7 8 1 8 1 9 7 9 7 15 8 15 8 9 14 9"></polygon></svg></a>
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-1 vi-btn">Yr polaroid
<!-- Icon video-play (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid -->
<div class="vi-btn-solid vi-btn-solid--no-pointer vi-btn-solid--lg vi-btn-solid--accent-2 vi-btn-solid--nested vi-btn">Tousled mlkshk
<!-- Icon cross-sign (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>Solid Icon #
The Solid Icon buttons renders by default in the dominant brand color.
Use modifiers --accent-1, --accent-2 or --error to change the color.
<!-- Button type: solid-icon -->
<a aria-label="Your label here" href="#" class="vi-btn-solid-icon vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></a>
<!-- Button type: solid-icon -->
<button aria-label="Your label here" type="button" class="vi-btn-solid-icon vi-btn-solid-icon--accent-1 vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></button>
<a aria-label="Your label here" class="sg-demo-link" href="#sample">
<!-- Button type: solid-icon -->
<div class="vi-btn-solid-icon vi-btn-solid-icon--accent-2 vi-btn-solid-icon--nested vi-btn">
<!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<!-- Button type: solid-icon -->
<a aria-label="Your label here" href="#" class="vi-btn-solid-icon vi-btn-solid-icon--error vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></a>To make a button appear disabled, you can follow the instructions provided based on the type of button element you are using.
- For an HTMLButtonElement, you can use the
disabledattribute to disable the button. This will prevent the button from receiving any clicks or interactions. - For an HTMLAnchorElement, you can use the
.disabledclass to visually represent the button as disabled. However, this will not inherently disable the functionality of the link. You will need to prevent the default behavior of the link using JavaScript or with attributesaria-disabled="true"combined withtabindex="-1".
<!-- Button type: solid-icon -->
<a aria-label="Your label here" aria-disabled="true" tabindex="-1" href="#" class="disabled vi-btn-solid-icon vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></a>
<!-- Button type: solid-icon -->
<button aria-label="Your label here" disabled type="button" class="vi-btn-solid-icon vi-btn-solid-icon--accent-1 vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></button>
<a aria-disabled="true" aria-label="Your label here" class="sg-demo-link" href="#sample" tabindex="-1">
<!-- Button type: solid-icon -->
<div class="disabled vi-btn-solid-icon vi-btn-solid-icon--accent-2 vi-btn-solid-icon--nested vi-btn">
<!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>To create small versions combine with modifer --sm.
12x12px icons should be used.
<!-- Button type: solid-icon -->
<a aria-label="Your label here" href="#" class="vi-btn-solid-icon vi-btn-solid-icon--sm vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2 8 2.5 7.5 4.5 9.5 4 10"></polygon><polygon points="7.5 2 8 1.5 10.5 4 10 4.5"></polygon><path fill-rule="nonzero" d="M9,0 L12,3 L4,11 L0,12 L1,8 L9,0 Z M9,1.415 L1.903,8.511 L1.374,10.625 L3.488,10.096 L10.585,3 L9,1.415 Z"></path></g></svg></a>
<!-- Button type: solid-icon -->
<button aria-label="Your label here" type="button" class="vi-btn-solid-icon vi-btn-solid-icon--sm vi-btn-solid-icon--accent-1 vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2 8 2.5 7.5 4.5 9.5 4 10"></polygon><polygon points="7.5 2 8 1.5 10.5 4 10 4.5"></polygon><path fill-rule="nonzero" d="M9,0 L12,3 L4,11 L0,12 L1,8 L9,0 Z M9,1.415 L1.903,8.511 L1.374,10.625 L3.488,10.096 L10.585,3 L9,1.415 Z"></path></g></svg></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid-icon -->
<div aria-label="Your label here" class="vi-btn-solid-icon vi-btn-solid-icon--sm vi-btn-solid-icon--accent-2 vi-btn-solid-icon--nested vi-btn">
<!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2 8 2.5 7.5 4.5 9.5 4 10"></polygon><polygon points="7.5 2 8 1.5 10.5 4 10 4.5"></polygon><path fill-rule="nonzero" d="M9,0 L12,3 L4,11 L0,12 L1,8 L9,0 Z M9,1.415 L1.903,8.511 L1.374,10.625 L3.488,10.096 L10.585,3 L9,1.415 Z"></path></g></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>To create large versions combine with modifer --lg.
24x24px icons should be used.
<!-- Button type: solid-icon -->
<a aria-label="Your label here" href="#" class="vi-btn-solid-icon vi-btn-solid-icon--lg vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="4.5 15.5 5 15 9 19 8.5 19.5"></polygon><polygon points="15.5 4.5 16 4 20 8 19.5 8.5"></polygon><path fill-rule="nonzero" d="M18,1 L23,6 L9,20 L1.5,22.5 L4,15 L18,1 Z M18,2.415 L4.873,15.541 L3.08,20.919 L8.458,19.126 L21.585,6 L18,2.415 Z"></path></g></svg></a>
<!-- Button type: solid-icon -->
<button aria-label="Your label here" type="button" class="vi-btn-solid-icon vi-btn-solid-icon--lg vi-btn-solid-icon--accent-1 vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="4.5 15.5 5 15 9 19 8.5 19.5"></polygon><polygon points="15.5 4.5 16 4 20 8 19.5 8.5"></polygon><path fill-rule="nonzero" d="M18,1 L23,6 L9,20 L1.5,22.5 L4,15 L18,1 Z M18,2.415 L4.873,15.541 L3.08,20.919 L8.458,19.126 L21.585,6 L18,2.415 Z"></path></g></svg></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: solid-icon -->
<div aria-label="Your label here" class="vi-btn-solid-icon vi-btn-solid-icon--lg vi-btn-solid-icon--accent-2 vi-btn-solid-icon--nested vi-btn">
<!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="4.5 15.5 5 15 9 19 8.5 19.5"></polygon><polygon points="15.5 4.5 16 4 20 8 19.5 8.5"></polygon><path fill-rule="nonzero" d="M18,1 L23,6 L9,20 L1.5,22.5 L4,15 L18,1 Z M18,2.415 L4.873,15.541 L3.08,20.919 L8.458,19.126 L21.585,6 L18,2.415 Z"></path></g></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>Outline #
The outline buttons renders by default in the dominant brand color.
Use modifiers --inversed, --accent-1, --accent-2 or --error to change the color.
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn">Tousled iphone</a>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn">Tofu cornhole</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline -->
<div class="vi-btn-outline vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">Cardigan tofu</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--error vi-btn">Artisan truffaut</a>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--inversed vi-btn">Normcore taxidermy</a>To make a button appear disabled, you can follow the instructions provided based on the type of button element you are using.
- For an HTMLButtonElement, you can use the
disabledattribute to disable the button. This will prevent the button from receiving any clicks or interactions. - For an HTMLAnchorElement, you can use the
.disabledclass to visually represent the button as disabled. However, this will not inherently disable the functionality of the link. You will need to prevent the default behavior of the link using JavaScript or with attributesaria-disabled="true"combined withtabindex="-1".
<!-- Button type: outline -->
<a aria-disabled="true" tabindex="-1" href="#" class="disabled vi-btn-outline vi-btn">Hashtag pickled</a>
<!-- Button type: outline -->
<button disabled type="button" class="vi-btn-outline vi-btn-outline--accent-1 vi-btn">Cardigan tofu</button>
<a aria-disabled="true" class="sg-demo-link" href="#sample" tabindex="-1">
<!-- Button type: outline -->
<div class="disabled vi-btn-outline vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">Truffaut chia</div>
<span dir="ltr">[hover me]</span>
</a>To create small versions combine with modifer --sm.
Use modifiers --inversed, --accent-1 or --accent-2 to change the color.
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--sm vi-btn">Aesthetic roof</a>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--sm vi-btn-outline--accent-1 vi-btn">Cornhole flexitarian</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline -->
<div class="vi-btn-outline vi-btn-outline--sm vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">90's selvage</div>
<span dir="ltr">[hover me]</span>
</a>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--sm vi-btn-outline--inversed vi-btn">Squid pinterest</a>To create large versions combine with modifer --lg.
Use modifiers --inversed, --accent-1 or --accent-2 to change the color.
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--lg vi-btn">Vice organic</a>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--lg vi-btn-outline--accent-1 vi-btn">Keytar blog</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline -->
<div class="vi-btn-outline vi-btn-outline--lg vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">Mumblecore xoxo</div>
<span dir="ltr">[hover me]</span>
</a>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--lg vi-btn-outline--inversed vi-btn">Marfa mlkshk</a>For back buttons use --back-pointer.
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--back-pointer vi-btn">Back</a>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--back-pointer vi-btn-outline--accent-1 vi-btn">Back</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline -->
<div class="vi-btn-outline vi-btn-outline--back-pointer vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">Back</div>
<span dir="ltr">[hover me]</span>
</a>To hide de pointer use modifier --no-pointer.
Outline buttons without pointer should only be used for actions (E.g. close, cancel or undo)
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn">Close</a>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--accent-1 vi-btn">Cancel</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline -->
<div class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">Undo</div>
<span dir="ltr">[hover me]</span>
</a>To add custom icons to outline button use modifier --no-pointer.
Note that here the icons are using modifiers --button-start or --button-end.
Keffiyeh diy
Sustainable biodiesel
Distillery tattooed
Street heirloom
Asymmetrical +1
[hover me]
Cold-pressed etsy
Sustainable biodiesel
Offal phlogiston
[hover me]
Distillery tattooed
Carry cred
[hover me]
Street heirloom
Flexitarian kogi
[hover me]
Login button (temporary example). Note that color depends on placement. Use modifiers.
Login Login Marfa lo-fi Hashtag stumptown<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn"><!-- Icon plus-sign (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="plus-sign"><polygon points="10 6 6 6 6 2 5 2 5 6 1 6 1 7 5 7 5 11 6 11 6 7 10 7"></polygon></svg>
Keffiyeh diy</a>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--accent-1 vi-btn"><!-- Icon video-play (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
Loko hoodie</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline -->
<div class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">
<!-- Icon printer (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="printer" width="12" height="12">
<path d="M10,4 L12,4 L12,10 L10,10 L10,12 L2,12 L2,10 L0,10 L0,4 L2,4 L2,0 L10,0 L10,4 Z M9,9 L3,9 L3,11 L9,11 L9,9 Z M9,1 L3,1 L3,5 L9,5 L9,1 Z"></path>
</svg>
Asymmetrical +1</div>
<span dir="ltr">[hover me]</span>
</a>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--error vi-btn"><!-- Icon trash (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="trash"><g fill-rule="evenodd"><path fill-rule="nonzero" d="M10,4 L9.5,12 L2.5,12 L2,4 L10,4 Z M8.935,5 L3.064,5 L3.439,11 L8.56,11 L8.935,5 Z"></path><polygon points="4.5 6 5.5 6 5.5 10 4.5 10"></polygon><polygon points="6.5 6 7.5 6 7.5 10 6.5 10"></polygon><path fill-rule="nonzero" d="M10.5,2 L11,5 L1,5 L1.5,2 L10.5,2 Z M9.652,3 L2.347,3 L2.18,4 L9.819,4 L9.652,3 Z"></path><path fill-rule="nonzero" d="M8,0 L8.5,3 L3.5,3 L4,0 L8,0 Z M7.152,1 L4.847,1 L4.68,2 L7.319,2 L7.152,1 Z"></path></g></svg>
Cold-pressed etsy</a>
<hr>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn">Sustainable biodiesel
<!-- Icon plus-sign (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="plus-sign"><polygon points="10 6 6 6 6 2 5 2 5 6 1 6 1 7 5 7 5 11 6 11 6 7 10 7"></polygon></svg></a>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--accent-1 vi-btn">Freegan farm-to-table
<!-- Icon video-play (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="video-play" width="12" height="12"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline -->
<div class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">Offal phlogiston
<!-- Icon printer (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="printer" width="12" height="12">
<path d="M10,4 L12,4 L12,10 L10,10 L10,12 L2,12 L2,10 L0,10 L0,4 L2,4 L2,0 L10,0 L10,4 Z M9,9 L3,9 L3,11 L9,11 L9,9 Z M9,1 L3,1 L3,5 L9,5 L9,1 Z"></path>
</svg>
</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--lg vi-btn"><!-- Icon plus-sign (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="plus-sign"><polygon points="14 8 8 8 8 2 7 2 7 8 1 8 1 9 7 9 7 15 8 15 8 9 14 9"></polygon></svg>
Distillery tattooed</a>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--lg vi-btn-outline--accent-1 vi-btn"><!-- Icon video-play (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg>
Wolf shoreditch</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline -->
<div class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--lg vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">
<!-- Icon printer (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 18 18" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="printer" width="16" height="16">
<path d="M15,7 L17,7 L17,15 L15,15 L15,17 L3,17 L3,15 L1,15 L1,7 L3,7 L3,1 L15,1 L15,7 Z M14,13 L4,13 L4,16 L14,16 L14,13 Z M14,2 L4,2 L4,8 L14,8 L14,2 Z"></path>
</svg>
Carry cred</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--lg vi-btn">Street heirloom
<!-- Icon plus-sign (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="plus-sign"><polygon points="14 8 8 8 8 2 7 2 7 8 1 8 1 9 7 9 7 15 8 15 8 9 14 9"></polygon></svg></a>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--lg vi-btn-outline--accent-1 vi-btn">Tofu knausgaard
<!-- Icon video-play (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="video-play" width="16" height="16"><path d="M11.1 5.4c.5.3.5.8 0 1.1l-7.3 4.9c-.4.3-.8.1-.8-.5V1c0-.5.4-.7.8-.4l7.3 4.8z" fill-rule="evenodd"></path></svg></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline -->
<div class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--lg vi-btn-outline--accent-2 vi-btn-outline--nested vi-btn">Flexitarian kogi
<!-- Icon printer (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 18 18" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="printer" width="16" height="16">
<path d="M15,7 L17,7 L17,15 L15,15 L15,17 L3,17 L3,15 L1,15 L1,7 L3,7 L3,1 L15,1 L15,7 Z M14,13 L4,13 L4,16 L14,16 L14,13 Z M14,2 L4,2 L4,8 L14,8 L14,2 Z"></path>
</svg>
</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<p class="text-muted small">Login button (temporary example). Note that color depends on placement. Use modifiers.</p>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn"><!-- Icon user (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="user" width="12" height="12"><path d="M8.4 8H3.5C2.1 8 1 9.1 1 10.5v.5h1v-.5C2 9.6 2.5 9 3.5 9h5c.9 0 1.5.6 1.5 1.5v.5h1v-.5C11 9.1 9.9 8 8.4 8zM6 1c.423 0 .817.075 1.183.225.366.16.683.374.95.641.268.268.482.585.642.95C8.925 3.184 9 3.578 9 4c0 .423-.075.817-.225 1.183-.16.366-.374.683-.641.95a3.056 3.056 0 0 1-.95.642C6.816 6.925 6.422 7 6 7c-.423 0-.817-.075-1.183-.225a3.056 3.056 0 0 1-.95-.641 3.056 3.056 0 0 1-.642-.95A3.087 3.087 0 0 1 3 4c0-.423.075-.817.225-1.183.16-.366.374-.683.641-.95.268-.268.585-.482.95-.642C5.184 1.075 5.578 1 6 1zm0 1c-.563 0-1.036.193-1.422.578C4.193 2.964 4 3.438 4 4c0 .563.193 1.036.578 1.422C4.964 5.807 5.438 6 6 6c.563 0 1.036-.193 1.422-.578C7.807 5.036 8 4.562 8 4c0-.563-.193-1.036-.578-1.422A1.933 1.933 0 0 0 6 2z" fill-rule="evenodd"></path></svg>
Login</a>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn">Login
<!-- Icon user (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="user" width="12" height="12"><path d="M8.4 8H3.5C2.1 8 1 9.1 1 10.5v.5h1v-.5C2 9.6 2.5 9 3.5 9h5c.9 0 1.5.6 1.5 1.5v.5h1v-.5C11 9.1 9.9 8 8.4 8zM6 1c.423 0 .817.075 1.183.225.366.16.683.374.95.641.268.268.482.585.642.95C8.925 3.184 9 3.578 9 4c0 .423-.075.817-.225 1.183-.16.366-.374.683-.641.95a3.056 3.056 0 0 1-.95.642C6.816 6.925 6.422 7 6 7c-.423 0-.817-.075-1.183-.225a3.056 3.056 0 0 1-.95-.641 3.056 3.056 0 0 1-.642-.95A3.087 3.087 0 0 1 3 4c0-.423.075-.817.225-1.183.16-.366.374-.683.641-.95.268-.268.585-.482.95-.642C5.184 1.075 5.578 1 6 1zm0 1c-.563 0-1.036.193-1.422.578C4.193 2.964 4 3.438 4 4c0 .563.193 1.036.578 1.422C4.964 5.807 5.438 6 6 6c.563 0 1.036-.193 1.422-.578C7.807 5.036 8 4.562 8 4c0-.563-.193-1.036-.578-1.422A1.933 1.933 0 0 0 6 2z" fill-rule="evenodd"></path></svg></a>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--lg vi-btn">Marfa lo-fi
<!-- Icon user (mods: --button-end) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end" aria-label="user" width="16" height="16"><path d="M11 10H5c-2.7 0-4 1.3-4 4v1h1v-1c0-2.1.9-3 3-3h6c2.1 0 3 .9 3 3v1h1v-1c0-2.7-1.3-4-4-4zM8.007 1c.563 0 1.09.1 1.578.3.488.213.91.498 1.267.855.357.357.642.78.855 1.268.2.488.3 1.014.3 1.577s-.1 1.09-.3 1.577c-.213.489-.498.911-.855 1.268s-.78.642-1.267.855c-.489.2-1.015.3-1.578.3-.563 0-1.09-.1-1.577-.3a4.074 4.074 0 0 1-1.268-.855 4.074 4.074 0 0 1-.854-1.268c-.2-.488-.301-1.014-.301-1.577s.1-1.09.3-1.577c.213-.489.498-.911.855-1.268s.78-.642 1.268-.855c.488-.2 1.014-.3 1.577-.3zM8 2c-.844 0-1.555.29-2.133.867C5.29 3.445 5 4.157 5 5c0 .844.29 1.555.867 2.133C6.445 7.71 7.157 8 8 8c.844 0 1.555-.29 2.133-.867C10.71 6.555 11 5.843 11 5c0-.844-.29-1.555-.867-2.133C9.555 2.29 8.843 2 8 2z" fill-rule="evenodd"></path></svg></a>
<!-- Button type: outline -->
<a href="#" class="vi-btn-outline vi-btn-outline--no-pointer vi-btn-outline--lg vi-btn"><!-- Icon user (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="user" width="16" height="16"><path d="M11 10H5c-2.7 0-4 1.3-4 4v1h1v-1c0-2.1.9-3 3-3h6c2.1 0 3 .9 3 3v1h1v-1c0-2.7-1.3-4-4-4zM8.007 1c.563 0 1.09.1 1.578.3.488.213.91.498 1.267.855.357.357.642.78.855 1.268.2.488.3 1.014.3 1.577s-.1 1.09-.3 1.577c-.213.489-.498.911-.855 1.268s-.78.642-1.267.855c-.489.2-1.015.3-1.578.3-.563 0-1.09-.1-1.577-.3a4.074 4.074 0 0 1-1.268-.855 4.074 4.074 0 0 1-.854-1.268c-.2-.488-.301-1.014-.301-1.577s.1-1.09.3-1.577c.213-.489.498-.911.855-1.268s.78-.642 1.268-.855c.488-.2 1.014-.3 1.577-.3zM8 2c-.844 0-1.555.29-2.133.867C5.29 3.445 5 4.157 5 5c0 .844.29 1.555.867 2.133C6.445 7.71 7.157 8 8 8c.844 0 1.555-.29 2.133-.867C10.71 6.555 11 5.843 11 5c0-.844-.29-1.555-.867-2.133C9.555 2.29 8.843 2 8 2z" fill-rule="evenodd"></path></svg>
Hashtag stumptown</a>Outline Icon #
The Outline Icon buttons renders by default in the dominant brand color.
Use modifiers --accent-1, --accent-2 or --error to change the color.
<!-- Button type: outline-icon -->
<a aria-label="Your label here" href="#" class="vi-btn-outline-icon vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></a>
<!-- Button type: outline-icon -->
<button aria-label="Your label here" type="button" class="vi-btn-outline-icon vi-btn-outline-icon--accent-1 vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></button>
<a aria-label="Your label here" class="sg-demo-link" href="#sample">
<!-- Button type: outline-icon -->
<div class="vi-btn-outline-icon vi-btn-outline-icon--accent-2 vi-btn-outline-icon--nested vi-btn">
<!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>
<hr>
<!-- Button type: outline-icon -->
<a aria-label="Your label here" href="#" class="vi-btn-outline-icon vi-btn-outline-icon--error vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></a>To make a button appear disabled, you can follow the instructions provided based on the type of button element you are using.
- For an HTMLButtonElement, you can use the
disabledattribute to disable the button. This will prevent the button from receiving any clicks or interactions. - For an HTMLAnchorElement, you can use the
.disabledclass to visually represent the button as disabled. However, this will not inherently disable the functionality of the link. You will need to prevent the default behavior of the link using JavaScript or with attributesaria-disabled="true"combined withtabindex="-1".
<!-- Button type: outline-icon -->
<a aria-label="Your label here" aria-disabled="true" tabindex="-1" href="#" class="disabled vi-btn-outline-icon vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></a>
<!-- Button type: outline-icon -->
<button aria-label="Your label here" disabled type="button" class="vi-btn-outline-icon vi-btn-outline-icon--accent-1 vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg></button>
<a aria-disabled="true" aria-label="Your label here" class="sg-demo-link" href="#sample" tabindex="-1">
<!-- Button type: outline-icon -->
<div class="disabled vi-btn-outline-icon vi-btn-outline-icon--accent-2 vi-btn-outline-icon--nested vi-btn">
<!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2.5 10.5 3 10 6 13 5.5 13.5"></polygon><polygon points="10 3 10.5 2.5 13.5 5.5 13 6"></polygon><path fill-rule="nonzero" d="M11.5,0.5 L15.5,4.5 L5.5,14.5 L2.27373675e-13,16 L1.5,10.5 L11.5,0.5 Z M11.5,1.915 L2.394,11.02 L1.424,14.575 L4.979,13.605 L14.085,4.5 L11.5,1.915 Z"></path></g></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>To create small versions combine with modifer --sm.
12x12px icons should be used.
<!-- Button type: outline-icon -->
<a aria-label="Your label here" href="#" class="vi-btn-outline-icon vi-btn-outline-icon--sm vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2 8 2.5 7.5 4.5 9.5 4 10"></polygon><polygon points="7.5 2 8 1.5 10.5 4 10 4.5"></polygon><path fill-rule="nonzero" d="M9,0 L12,3 L4,11 L0,12 L1,8 L9,0 Z M9,1.415 L1.903,8.511 L1.374,10.625 L3.488,10.096 L10.585,3 L9,1.415 Z"></path></g></svg></a>
<!-- Button type: outline-icon -->
<button aria-label="Your label here" type="button" class="vi-btn-outline-icon vi-btn-outline-icon--sm vi-btn-outline-icon--accent-1 vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2 8 2.5 7.5 4.5 9.5 4 10"></polygon><polygon points="7.5 2 8 1.5 10.5 4 10 4.5"></polygon><path fill-rule="nonzero" d="M9,0 L12,3 L4,11 L0,12 L1,8 L9,0 Z M9,1.415 L1.903,8.511 L1.374,10.625 L3.488,10.096 L10.585,3 L9,1.415 Z"></path></g></svg></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline-icon -->
<div aria-label="Your label here" class="vi-btn-outline-icon vi-btn-outline-icon--sm vi-btn-outline-icon--accent-2 vi-btn-outline-icon--nested vi-btn">
<!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="2 8 2.5 7.5 4.5 9.5 4 10"></polygon><polygon points="7.5 2 8 1.5 10.5 4 10 4.5"></polygon><path fill-rule="nonzero" d="M9,0 L12,3 L4,11 L0,12 L1,8 L9,0 Z M9,1.415 L1.903,8.511 L1.374,10.625 L3.488,10.096 L10.585,3 L9,1.415 Z"></path></g></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>To create large versions combine with modifer --lg.
24x24px icons should be used.
<!-- Button type: outline-icon -->
<a aria-label="Your label here" href="#" class="vi-btn-outline-icon vi-btn-outline-icon--lg vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="4.5 15.5 5 15 9 19 8.5 19.5"></polygon><polygon points="15.5 4.5 16 4 20 8 19.5 8.5"></polygon><path fill-rule="nonzero" d="M18,1 L23,6 L9,20 L1.5,22.5 L4,15 L18,1 Z M18,2.415 L4.873,15.541 L3.08,20.919 L8.458,19.126 L21.585,6 L18,2.415 Z"></path></g></svg></a>
<!-- Button type: outline-icon -->
<button aria-label="Your label here" type="button" class="vi-btn-outline-icon vi-btn-outline-icon--lg vi-btn-outline-icon--accent-1 vi-btn"><!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="4.5 15.5 5 15 9 19 8.5 19.5"></polygon><polygon points="15.5 4.5 16 4 20 8 19.5 8.5"></polygon><path fill-rule="nonzero" d="M18,1 L23,6 L9,20 L1.5,22.5 L4,15 L18,1 Z M18,2.415 L4.873,15.541 L3.08,20.919 L8.458,19.126 L21.585,6 L18,2.415 Z"></path></g></svg></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: outline-icon -->
<div aria-label="Your label here" class="vi-btn-outline-icon vi-btn-outline-icon--lg vi-btn-outline-icon--accent-2 vi-btn-outline-icon--nested vi-btn">
<!-- Icon edit -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="edit"><g fill-rule="evenodd"><polygon points="4.5 15.5 5 15 9 19 8.5 19.5"></polygon><polygon points="15.5 4.5 16 4 20 8 19.5 8.5"></polygon><path fill-rule="nonzero" d="M18,1 L23,6 L9,20 L1.5,22.5 L4,15 L18,1 Z M18,2.415 L4.873,15.541 L3.08,20.919 L8.458,19.126 L21.585,6 L18,2.415 Z"></path></g></svg>
</div>
<span dir="ltr">[hover me]</span>
</a>Underline #
The underline buttons renders by default in a strong accent color.
Use modifiers --inversed to change the color.
<!-- Button type: underline -->
<a href="#" class="vi-btn-underline vi-btn">Post-ironic semiotics</a>
<!-- Button type: underline -->
<button type="button" class="vi-btn-underline vi-btn">Plaid stumptown</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: underline -->
<div class="vi-btn-underline vi-btn-underline--nested vi-btn">Pickled keytar</div>
<span dir="ltr">[hover me]</span>
</a>
<!-- Button type: underline -->
<a href="#" class="vi-btn-underline vi-btn-underline--inversed vi-btn">Listicle pour-over</a>
<!-- Button type: underline -->
<button type="button" class="vi-btn-underline vi-btn-underline--inversed vi-btn">Thundercats umami</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: underline -->
<div class="vi-btn-underline vi-btn-underline--inversed vi-btn-underline--nested vi-btn">Thundercats retro</div>
<span dir="ltr">[hover me]</span>
</a>Link #
The link buttons a button as a link.
Please note that a button can not inherit behaviour as a link. So edge cases may arise.
<a href="#sg-13ac0e">This is a link</a>
<!-- Button type: link -->
<a href="#" class="vi-btn-link vi-btn">This is a link</a>
<!-- Button type: link -->
<button type="button" class="vi-btn-link vi-btn">This is a link</button>Input Extend #
The input extend buttons are specifically for use next to the input button like input extend.
<div style="height: 50px; display: flex; align-items: start; gap: 1px;">
<!-- Button type: input-extend -->
<button aria-label="Your label here" type="button" class="vi-btn-input-extend vi-btn"><!-- Icon cross-sign -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg></button>
<!-- Button type: input-extend -->
<button aria-label="Your label here" type="button" class="vi-btn-input-extend vi-btn"><!-- Icon cross-sign -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="16" height="16"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg></button>
</div>Area Link #
The area link buttons must be used in grid and are small rectangular versions of the Area Links
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-4">
<!-- Button type: area-link -->
<a href="#" class="vi-btn-area-link vi-btn"><span class="vi-btn-area-link__label vi-btn__label">Ethical banjo</span></a>
</div>
<div class="col-4">
<!-- Button type: area-link -->
<button type="button" class="vi-btn-area-link vi-btn"><span class="vi-btn-area-link__label vi-btn__label">Migas xoxo</span></button>
</div>
<div class="col-4">
<!-- Button type: area-link -->
<a href="#" class="vi-btn-area-link vi-btn"><span class="vi-btn-area-link__label vi-btn__label">Salvia cliche cronut pug cold-pressed literally vinyl lumbersexual chambray portland</span></a>
</div>
</div>
</div>The Pattern is used for background patterns.
Add classes .vi-pattern and .vi-pattern--random-gradient-moment to the element
with class .vi-btn-area-link
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-4">
<!-- Button type: area-link -->
<a href="#" class="vi-pattern vi-pattern--random-gradient-moment vi-btn-area-link vi-btn"><span class="vi-btn-area-link__label vi-btn__label">Tacos tumblr</span></a>
</div>
<div class="col-4">
<!-- Button type: area-link -->
<button type="button" class="vi-pattern vi-pattern--random-gradient-moment vi-btn-area-link vi-btn"><span class="vi-btn-area-link__label vi-btn__label">Quinoa hoodie</span></button>
</div>
<div class="col-4">
<!-- Button type: area-link -->
<a href="#" class="vi-pattern vi-pattern--random-gradient-moment vi-btn-area-link vi-btn"><span class="vi-btn-area-link__label vi-btn__label">Actually letterpress pbr&b ugh sartorial literally brunch diy wolf ennui</span></a>
</div>
</div>
</div>Component buttons
Following buttons are used as part of other components. Never use standalone.
Arrow #
The arrow buttons renders by default in a strong the dominant brand color.
Use modifiers --inversed to change the color.
<!-- Button type: arrow -->
<a href="#" class="vi-btn-arrow vi-btn">Slow-carb literally</a>
<!-- Button type: arrow -->
<button type="button" class="vi-btn-arrow vi-btn">Sustainable chia</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--nested vi-btn">Austin schlitz</div>
<span dir="ltr">[hover me]</span>
</a>
<!-- Button type: arrow -->
<a href="#" class="vi-btn-arrow vi-btn-arrow--inversed vi-btn">Shoreditch quinoa</a>
<!-- Button type: arrow -->
<button type="button" class="vi-btn-arrow vi-btn-arrow--inversed vi-btn">Helvetica ennui</button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: arrow -->
<div class="vi-btn-arrow vi-btn-arrow--inversed vi-btn-arrow--nested vi-btn">Keffiyeh banjo</div>
<span dir="ltr">[hover me]</span>
</a>Close #
Close buttons are defined by adding the .vi-btn-close class to the element.
The hitarea is somewhat larger than the actual cross.
Use modifiers --inversed, or --accent-1 to change the color.
And modifer --sm for a small version of this button.
<!-- Button type: close -->
<a href="#" class="vi-btn-close vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></a>
<!-- Button type: close -->
<a href="#" class="vi-btn-close vi-btn-close--sm vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></a>
<!-- Button type: close -->
<button type="button" class="vi-btn-close vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: close -->
<span class="vi-btn-close vi-btn-close--nested vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></span>
<span dir="ltr">[hover me]</span>
</a>
<!-- Button type: close -->
<a href="#" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></a>
<!-- Button type: close -->
<a href="#" class="vi-btn-close vi-btn-close--accent-1 vi-btn-close--sm vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></a>
<!-- Button type: close -->
<button type="button" class="vi-btn-close vi-btn-close--accent-1 vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: close -->
<span class="vi-btn-close vi-btn-close--accent-1 vi-btn-close--nested vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></span>
<span dir="ltr">[hover me]</span>
</a>
<!-- Button type: close -->
<a href="#" class="vi-btn-close vi-btn-close--inversed vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></a>
<!-- Button type: close -->
<a href="#" class="vi-btn-close vi-btn-close--inversed vi-btn-close--sm vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></a>
<!-- Button type: close -->
<button type="button" class="vi-btn-close vi-btn-close--inversed vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></button>
<a class="sg-demo-link" href="#sample">
<!-- Button type: close -->
<span class="vi-btn-close vi-btn-close--inversed vi-btn-close--nested vi-btn"><span class="vi-btn-close__label vi-btn__label">Close</span></span>
<span dir="ltr">[hover me]</span>
</a>Generic #
The Generic buttons are stretchy. Width and height are 100% of it's containing element. The button renders transparent by default. Use as a building block for other components.
The following modifiers are available:
--primary-1change color--accent-1change color--accent-2change color--circularto make it circular--fitto fit absolutely positioned to the containing block
<!-- Button type: generic -->
<a style="width: 50px; height: 50px;" href="#" class="vi-btn-generic vi-btn"><span class="vi-btn-generic__label vi-btn__label">squid</span></a>
<div style="width: 90px; height: 90px;">
<!-- Button type: generic -->
<button type="button" class="vi-btn-generic vi-btn"><span class="vi-btn-generic__label vi-btn__label">DIY</span></button>
</div>
<div style="width: 50px; height: 90px; position: relative; margin-right: 100px;">
<a class="sg-demo-link" href="#sample">
<!-- Button type: generic -->
<div class="vi-btn-generic vi-btn-generic--nested vi-btn"><span class="vi-btn-generic__label vi-btn__label">Cred freegan</span></div>
<!-- demo -->
<span dir="ltr" style="position: absolute; left: 55px; top: 0; white-space: nowrap;">
[hover me]
</span>
</a>
</div>
<!-- Button type: generic -->
<a style="width: 50px; height: 50px;" href="#" class="vi-btn-generic vi-btn-generic--primary-1 vi-btn"><span class="vi-btn-generic__label vi-btn__label">post-ironic</span></a>
<!-- ... left out for clarity -->
<hr>
<!-- Button type: generic -->
<a style="width: 50px; height: 50px;" href="#" class="vi-btn-generic vi-btn-generic--accent-1 vi-btn"><span class="vi-btn-generic__label vi-btn__label">XOXO</span></a>
<!-- ... left out for clarity -->
<!-- Button type: generic -->
<a style="width: 50px; height: 50px;" href="#" class="vi-btn-generic vi-btn-generic--accent-2 vi-btn"><span class="vi-btn-generic__label vi-btn__label">chicharrones</span></a>
<!-- ... left out for clarity -->
<hr>
<!-- Button type: generic -->
<a style="width: 50px; height: 50px;" href="#" class="vi-btn-generic vi-btn-generic--primary-1 vi-btn-generic--circular vi-btn"><span class="vi-btn-generic__label vi-btn__label">celiac</span></a>
<!-- ... left out for clarity -->Special purpose buttons
Following buttons are not intended to be used in other places than described.
These buttons doe not have the --nested modifier.
Pagination #
The pagination buttons are specifically for use in the Pagination component.
Pagination buttons are defined by adding the .vi-btn-pagination class to the element. Width and height are 100% of its containing element.
Use the following modifiers for special purpose instances:
--gapfor the gap buttons marking a window. These buttons still need the … inside.--prevwill show an arrow to the left--nextwill show an arrow to the right--tickwill show an tick
<div style="width: 60px; height: 60px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">77</span></a>
</div>
<div style="width: 60px; height: 60px; display: inline-block;">
<!-- Button type: pagination -->
<span aria-current="page" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">78</span></span>
</div>
<div style="width: 60px; height: 60px; display: inline-block;">
<!-- Button type: pagination -->
<span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
</div>
<div style="width: 60px; height: 60px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn__label">Previous</span></a>
</div>
<div style="width: 60px; height: 60px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn__label">Next</span></a>
</div>
<div style="width: 60px; height: 60px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--tick vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--tick vi-btn__label">Completed</span></a>
</div>
<hr>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">77</span></a>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<span aria-current="page" class="active vi-btn-pagination vi-btn"><span class="vi-btn-pagination__label vi-btn__label">78</span></span>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<span class="vi-btn-pagination vi-btn-pagination--gap vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--gap vi-btn__label">…</span></span>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn__label">Previous</span></a>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn__label">Next</span></a>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--tick vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--tick vi-btn__label">Completed</span></a>
</div>The previous and next buttons can be used separately. In that case, use the inversed version:
--inversedwill inverse the base color.--prevwill show an arrow to the left.--nextwill show an arrow to the right.
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--inversed vi-btn__label">Previous</span></a>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--inversed vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--inversed vi-btn__label">Next</span></a>
</div>A white variant exists for use with the Hero preset slider.
--whitewhite button color to overlay image.--prevwill show an arrow to the left.--nextwill show an arrow to the right.
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--prev vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--prev vi-btn-pagination__label--white vi-btn__label">Previous</span></a>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: pagination -->
<a href="#" class="vi-btn-pagination vi-btn-pagination--next vi-btn-pagination--white vi-btn"><span class="vi-btn-pagination__label vi-btn-pagination__label--next vi-btn-pagination__label--white vi-btn__label">Next</span></a>
</div>Slider #
The slider button is used together with pagination buttons in the Slider and in the Table (which acts as slider) component.
Slider buttons are defined by adding the .vi-btn-slider class to the element. Width and height are 100% of its containing element.
Use the following modifiers for special purpose instances:
--pauseshows pause button.--playshows play button.--collapseshows collapse button.--expandshows expand button.
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: slider -->
<a href="#" class="vi-btn-slider vi-btn-slider--pause vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--pause vi-btn__label">Pause</span></a>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: slider -->
<a href="#" class="vi-btn-slider vi-btn-slider--play vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--play vi-btn__label">Play</span></a>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: slider -->
<a href="#" class="vi-btn-slider vi-btn-slider--collapse vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--collapse vi-btn__label">Collapse</span></a>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: slider -->
<a href="#" class="vi-btn-slider vi-btn-slider--expand vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--expand vi-btn__label">Expand</span></a>
</div>A white variant exists for use with the Hero preset slider.
--whitewhite button color to overlay image.--pauseshows pause button.--playshows play button.
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: slider -->
<a href="#" class="vi-btn-slider vi-btn-slider--pause vi-btn-slider--white vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--pause vi-btn-slider__label--white vi-btn__label">Pause</span></a>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: slider -->
<a href="#" class="vi-btn-slider vi-btn-slider--play vi-btn-slider--white vi-btn"><span class="vi-btn-slider__label vi-btn-slider__label--play vi-btn-slider__label--white vi-btn__label">Play</span></a>
</div>Player #
The player button is used as play/pause control for the Read Out Loud player component.
Player buttons are defined by adding the .vi-btn-player class to the element. Width and height are 100% of its containing element.
Use the following modifiers for special purpose instances:
--pauseshows pause button.--playshows play button.--loadingshows loading button.
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: player -->
<button type="button" class="vi-btn-player vi-btn-player--pause vi-btn"><span class="vi-btn-player__label vi-btn-player__label--pause vi-btn__label">Pause</span></button>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: player -->
<button type="button" class="vi-btn-player vi-btn-player--play vi-btn"><span class="vi-btn-player__label vi-btn-player__label--play vi-btn__label">Play</span></button>
</div>
<div style="width: 40px; height: 40px; display: inline-block;">
<!-- Button type: player -->
<button type="button" class="vi-btn-player vi-btn-player--loading vi-btn"><span class="vi-btn-player__label vi-btn-player__label--loading vi-btn__label">Loading</span></button>
</div>Masthead #
The masthead buttons are specifically for use in the page masthead.
Add the .vi-btn-masthead class to the element with one of the following modifier combinations to get specific icon and color:
countriessessionandiconsearchandiconcloseandicon
Modifier is always required.
<!-- Button type: masthead -->
<a href="#" class="vi-btn-masthead vi-btn-masthead--countries vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--countries vi-btn__label">Fixie keffiyeh</span></a>
<!-- Button type: masthead -->
<a href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--session vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--session vi-btn__label">Master williamsburg</span></a>
<!-- Button type: masthead -->
<button type="button" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--search vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--search vi-btn__label">Brooklyn hammock</span></button>
<!-- Button type: masthead -->
<button type="button" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--close vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--close vi-btn__label">Biodiesel salvia</span></button>
<!-- Button type: masthead -->
<a href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--pharmacy vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--pharmacy vi-btn__label">Pbr&b lomo</span></a>
<!-- Button type: masthead -->
<a href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--cart vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--cart vi-btn__label">12</span></a>
<!-- Button type: masthead -->
<a href="#" class="vi-btn-masthead vi-btn-masthead--icon vi-btn-masthead--voucher-balance vi-btn"><span class="vi-btn-masthead__label vi-btn-masthead__label--icon vi-btn-masthead__label--voucher-balance vi-btn__label">Voucher Balance</span></a>Layout #
The layout buttons are specifically for use in the page layout.
Add the .vi-btn-layout class to the element with one of the two modifiers to get specific icon:
openclose
<!-- Button type: layout -->
<button type="button" class="vi-btn-layout vi-btn-layout--open vi-btn">Menu</button>
<!-- Button type: layout -->
<button type="button" class="vi-btn-layout vi-btn-layout--close vi-btn">Close</button>The share button is used in the Quote share.
Add the .vi-btn-share class to the element
<!-- Button type: share -->
<button type="button" class="vi-btn-share vi-btn">Share</button>Search #
The search buttons are specifically for use in the page search.
Add the .vi-btn-search class to the element.
Add modifier --clear to have a clear button variant (as used in page search)
<!-- Button type: search -->
<button type="submit" class="vi-btn-search vi-btn">Search</button>
<!-- Button type: search -->
<button type="clear" class="vi-btn-search vi-btn-search--clear vi-btn">Search</button>WhatsApp #
The WhatsApp button has custom style rules. The WhatsApp button (link) can be used as an alternative for chat. When used on a page, this button sticks to the bottom left (or right depending reading direction).
See WhatsApp documentation for url instructions.
Please note that the button on this specific page has extra styling to place the button in the example box.
<!-- div with border to better illustrate example -->
<div style="border: 1px solid rgba(0,0,0,.05); position: relative; height: 100px;">
<!-- Button type: whatsapp -->
<a href="#" class="vi-btn-whatsapp vi-btn"><span class="vi-btn-whatsapp__label vi-btn__label">WhatsApp</span></a>
</div>Javascript
Use the javascript in the following cases.
Bootstrap Collapse #
When working with Bootstraps Collapse sometimes the text needs to change between states.
For this use data attribute data-opposite-text.
It allows to set the text for the opposite state (expanded when initially collapsed and visa versa).
It depends on the attribute aria-expanded being set correctly.
See Icon documentation for more information about using icons inside buttons and changing icons between states.
For more information on how this works please refer to the Bootstrap Collapse documentation.
<div class="collapse" id="sg-e858bc">
<p>For more information on how this works please refer to the Bootstrap <a href="https://getbootstrap.com/docs/4.4/components/collapse/">Collapse</a> documentation.</p>
</div>
<!-- Button type: solid -->
<button data-toggle="collapse" data-opposite-text="Close" aria-expanded="false" role="button" href="#sg-e858bc" type="button" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Keffiyeh humblebrag
<!-- Icon plus-sign (mods: --button-end, --aria-expanded-false) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end vi-icon--aria-expanded-false" aria-label="plus-sign"><polygon points="10 6 6 6 6 2 5 2 5 6 1 6 1 7 5 7 5 11 6 11 6 7 10 7"></polygon></svg>
<!-- Icon cross-sign (mods: --button-end, --aria-expanded-true) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-end vi-icon--aria-expanded-true" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg></button>
<hr>
<!-- Button type: solid -->
<button data-toggle="collapse" data-opposite-text="Close" aria-expanded="false" role="button" href="#sg-e858bc" type="button" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn"><!-- Icon plus-sign (mods: --button-start, --aria-expanded-false) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start vi-icon--aria-expanded-false" aria-label="plus-sign"><polygon points="10 6 6 6 6 2 5 2 5 6 1 6 1 7 5 7 5 11 6 11 6 7 10 7"></polygon></svg>
<!-- Icon cross-sign (mods: --button-start, --aria-expanded-true) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start vi-icon--aria-expanded-true" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
Cold-pressed pour-over</button>When for some reason an icon has to be placed between text the data-opposite-text value can contain separators in the form of two pipe-symbols (||)
to split the value in parts.
For more information on how this works please refer to the Bootstrap Collapse documentation.
<div class="collapse" id="sg-77e3c9">
<p>For more information on how this works please refer to the Bootstrap <a href="https://getbootstrap.com/docs/4.4/components/collapse/">Collapse</a> documentation.</p>
</div>
<!-- Button type: solid -->
<button data-toggle="collapse" data-opposite-text="Close||when done reading information" aria-expanded="false" role="button" href="#sg-77e3c9" type="button" class="vi-btn-solid vi-btn-solid--accent-2 vi-btn">Open
<!-- Icon plus-sign (mods: --button, --aria-expanded-false) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button vi-icon--aria-expanded-false" aria-label="plus-sign"><polygon points="10 6 6 6 6 2 5 2 5 6 1 6 1 7 5 7 5 11 6 11 6 7 10 7"></polygon></svg>
<!-- Icon cross-sign (mods: --button, --aria-expanded-true) -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button vi-icon--aria-expanded-true" aria-label="cross-sign" width="12" height="12"><path d="M10.5 2.5l-.7-.7-4.2 4.1-4.1-4.1-.7.7 4.1 4.1-4.1 4.2.7.7 4.1-4.2 4.2 4.2.7-.7-4.2-4.2z"></path></svg>
to read the information</button>Stylesheets #
The following stylesheets are required to display this component.
The following additional stylesheets are used to display the example(s).
JavaScript #
The following javascript is required to display this component.
The following additional javascript is used to display the example(s).
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- 14 May 2025 - fix(button): outline on product version of arrow buttons
- 30 Jan 2025 - fix(button): add prefix to background and background-color variables
- 04 Sep 2024 - Regression in masthead session button.
- 06 Dec 2023 - Fixed light buttons on SCS and Global.
- 10 May 2023 - Button focus outline visible on accordion trigger.
- 9 May 2023 - z-index on masthead button changed.
- 10 Mar 2023 - layout button min-height so it can be used without text.
- 11 Jan 2023 - Corrected button sizes.
- 01 Dec 2022 - Corrected button sizes.
- 12 Sept 2022 - Alignment of area link button when direction is RTL
- 04 Juli 2022 - Shot in the dark. Trying to fix not-containment of the ‘background’ element by button boundaries
- 28 June 2022 - Remove unintended white line on active/hover state
- Hover color peaking through primary color on solid button variants
- Hover color peaking through primary color on solid button
- A11y outline issue button-element not receiving focus outline
- Allow Share Button to work inside Typesystem
- RTL arrow buttons.
- Solid button GPU layer problem safari, again (thanks to update safari).
- Solid button GPU layer problem safari.
Changed
- 14 Aug 2024: Update buttons to allow new Mephis design.
- 28 Jun 2023: Changed Icon on masthead voucher-balance button.
- 21 Apr 2023: Update disabled state on solid and outline buttons.
- Make Solid button background work inside typesystem.
- Print: css adjustments
- Accessibility: focus display search button back(!) to contrast color.
- Accessibility: Update outline width to 2.5px;
- Accessibility: focus display in specific color #0D3360
- Accessibility: focus display
- Pagination button works inside typesystem.
- Pagination button, when active now responds to interactions.
- Modifier required on all masthead buttons.
Added
- 15 Nov 2024 - feat(button): add input extend button.
- 21 Jun 2023 - Add
--voucher-balance to masthead buttons.
- 09 Jun 2023 - Add
--accent-3 modifier to solid buttons.
- 12 May 2023 - Add
--error modifier to solid buttons, outline buttons and outline icon buttons.
- 21 Apr 2023 - Add
--pharmacy and --cart to masthead buttons.
- 24 Mar 2023 - Add modifier
--clear to Search Button
- 02 Dec 2022 - Add Solid Icon and Outline Icon button variations
- 13 June 2022 - None gradient Area Link Buttons
- Area Link Buttons
- Link type, a button that looks like a link Link
- Partial PBS support: Arrow button
- Add
--collapse, --expand modifiers to Slider button
- Partial PBS support
- Add Player Button.
- Add icon examples to outline button.
- Temporary login button example.
- Add
--tick to Pagination button
- RTL support
- Add
--sm modifier to Close button
- Pagination button modifer
--white for use in hero slider.
- Add
--no-pointer modifier for outline buttons for actions.
- Add
--back-pointer modifier for outline buttons for back buttons.
- Use
data-oposite-text attribute to define opposite state text when using Bootstraps Collapse (javascript).
- Add
--no-pointer modifier for solid buttons to use custom icons.
- Add
--inversed modifier for prev and next pagination buttons
- Close Button
- Arrow, Generic, Outline, Solid and Underline buttons should work within Typesystem.
- Pagination buttons
- Initial draft