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:

.close

Large size:

.close-lg

					

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


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

Carets

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.

Default:

Normal state:

.caret

Open state:

.open
* (on same element or on parent)

					

<span class="caret"></span>


<div class="open">
   <span class="caret"></span>
</div>


<span class="caret open"></span>

Size:

Small/default size:

.caret

Large size:

.caret.caret-lg

					
<!-- Default/Small variant -->

<span class="caret"></span>

<!-- Large variant -->

<span class="caret caret-lg"></span>

Color options:

Default:

.caret
.caret.caret-lg

Primary variant:

.caret.caret-primary
.caret.caret-lg.caret-primary

Secondary variant:

.caret.caret-secondary
.caret.caret-lg.caret-secondary

Disabled variant:

.caret.caret-disabled
.caret.caret-lg.caret-disabled

					
<!-- Primary variant -->

<span class="caret caret-primary"></span>

<!-- Secondary variant -->

<span class="caret caret-secondary"></span>

<!-- Disabled variant -->

<span class="caret caret-disabled"></span>

Old options:

.caret-large-default

.caret-large-disabled

.caret-large-primary

.caret-large-secondary

.caret-small-default

.caret-small-disabled

.caret-small-primary

.caret-small-white

					
<!-- 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>