Skip to main content Skip to navigation Skip to search

CSS

Clarity defines different button, status and size classes.

Classes

CSS Class Host Element(s) Type Description Required
.btn button base Base button class, defaults to primary colored outline button. yes
.btn-primary button color Solid button with primary color. no
.btn-success button color Solid button with success color. no
.btn-warning button color Solid button with warning color. no
.btn-warning button color Solid button with danger color. no
.btn-outline button color Outline button with primary color. no
.btn-success-outline button color Outline button with success color. no
.btn-info-outline button color Outline button with primary color. no
.btn-warning-outline button color Outline button with warning color no
.btn-danger-outline button color Outline button with danger color. no
.btn-link button color Flat button with primary color. no
.btn-inverse button color Add to make an inverse colored outline button. no
.btn-sm button size Add to make a small button size. no
.btn-block button size Add to make a block level button element. no
.btn-icon button size Creates a button sized to fit an cds-icon element. no