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

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)

Size:

Small/default size:

.caret  

Large size:

.caret.caret-lg  

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  

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