You are viewing the legacy documentation of Plasma featuring the components from the
@coveord/plasma-react
and @coveord/plasma-style
packages. Those packages are deprecated and replaced by the @coveord/plasma-mantine
package. Feedback
Color dot
A color dot indicates the status of an item.
Success
1const Demo = () => (2<>3<span className="inline-flex label">4<i className="color-dot mr1" />5Success6</span>7</>8);9export default Demo;
Examples
Color dots sizes
1const Demo = () => (2<>3<i className="color-dot mr1" />4<i className="color-dot state-critical mr1" />5<i className="color-dot state-major mr1" />6<i className="color-dot state-minor mr1" />7<i className="color-dot state-warning mr1" />8<i className="color-dot state-info mr1" />9<i className="color-dot state-disabled mr1" />10<i className="color-dot state-waiting mr1" />11<i className="color-dot state-new mr1" />12<i className="color-dot state-maintenance mr1" />13<br></br>14<br></br>15<i className="color-dot mod-small mr1" />16<i className="color-dot mod-small state-critical mr1" />17<i className="color-dot mod-small state-major mr1" />18<i className="color-dot mod-small state-minor mr1" />19<i className="color-dot mod-small state-warning mr1" />20<i className="color-dot mod-small state-info mr1" />21<i className="color-dot mod-small state-disabled mr1" />22<i className="color-dot mod-small state-waiting mr1" />23<i className="color-dot mod-small state-new mr1" />24<i className="color-dot mod-small state-maintenance" />25</>26);27export default Demo;
Flashing color dots
1const Demo = () => (2<>3<i className="color-dot state-executing mr1" />4<i className="color-dot state-executing state-critical mr1" />5<i className="color-dot state-executing state-major mr1" />6<i className="color-dot state-executing state-minor mr1" />7<i className="color-dot state-executing state-warning mr1" />8<i className="color-dot state-executing state-info mr1" />9<i className="color-dot state-executing state-disabled mr1" />10<i className="color-dot state-executing state-waiting mr1" />11<i className="color-dot state-executing state-new mr1" />12<i className="color-dot state-executing state-maintenance" />13</>14);15export default Demo;
No guidelines exist for ColorDot yet.