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>