Status
Usage notes
Status lights describe the condition of an entity. They can be used to convey semantic meaning, such as statuses and categories.
Default
Toggle markup
<coral-status>Neutral</coral-status>
Disabled
Toggle markup
<coral-status disabled="">Disabled</coral-status>
Semantic
Toggle markup
<coral-status variant="success">Positive</coral-status>
<coral-status variant="error">Negative</coral-status>
<coral-status variant="warning">Notice</coral-status>
<coral-status variant="info">Info</coral-status>
Color
Toggle markup
<coral-status color="indigo">Indigo</coral-status>
<coral-status color="celery">Celery</coral-status>
<coral-status color="magenta">Magenta</coral-status>
<coral-status color="yellow">Yellow</coral-status>
<coral-status color="fuchsia">Fuchsia</coral-status>
<coral-status color="seafoam">Seafoam</coral-status>
<coral-status color="chartreuse">Chartreuse</coral-status>
<coral-status color="purple">Purple</coral-status>