Close button and carets

Close button

Use the generic close icon for dismissing content like modals and alerts. Just add .close class on a button or a. For a larger close icon add .close-lg class too.

Regular size:


Large size:

<button type="button" class="close"></button>
<button type="button" class="close close-lg"></button>


Use carets to indicate dropdown functionality and direction.

This carets are available on 3 sizes and 4 colours (default, disabled, primary and secondary). Use the .caret for the default caret and addition class if you'd like a different size or color. Check the classes and examples below.


Normal state:


Open state:

* (on same element or on parent)
<span class="caret"></span>
<div class="open"> <span class="caret"></span> </div>
<span class="caret open"></span>

Multiples options:









<!-- Large on different colors -->
<span class="caret caret-large-default"></span>
<span class="caret caret-large-disabled"></span>
<span class="caret caret-large-primary"></span>
<span class="caret caret-large-secondary"></span>
<!-- Small on different colors -->
<span class="caret caret-small-default"></span>
<span class="caret caret-small-disabled"></span>
<span class="caret caret-small-primary"></span>
<span class="caret caret-small-secondary"></span>