Reference Source
import {Status} from '@adobe/coral-spectrum'
public class | source

Status

Expression Extends:

class Status extends BaseComponent(HTMLElement)

Mixin Extends:

HTMLElement, BaseComponent

A Status component to describe the condition of another entity. They can be used to convey semantic meaning such as statuses and categories.

See:

Example:

Markup
<coral-status></coral-status>
JS constructor
new Coral.Status();

Static Member Summary

Static Public Members
public static

Returns Status colors.

public static

Returns Status variants.

Member Summary

Public Members
public

The status color.

public

Whether the status is disabled or not.

public

The status label element.

public

The status variant.

Static Public Members

public static color: StatusColorEnum: * source

Returns Status colors.

Return:

StatusColorEnum

public static variant: StatusVariantEnum: * source

Returns Status variants.

Public Members

public color: String source

The status color. See StatusColorEnum. When a status is used to color code categories and labels commonly found in data visualization, they should use colors.

The ideal usage for colors is when there are 8 or fewer categories or labels being color coded. Use them in the following order to ensure the greatest possible color differences for multiple forms of color blindness:

  • Indigo
  • Celery
  • Magenta
  • Yellow
  • Fuchsia
  • Seafoam
  • Chartreuse
  • Purple

If a color is set, it'll override any semantic variant.

  • StatusColorEnum.DEFAULT by default.
  • reflected

public disabled: Boolean source

Whether the status is disabled or not.

  • false by default.
  • reflected

public label: StatusLabel source

The status label element.

  • content-zone

public variant: String source

The status variant. See StatusVariantEnum. When a status has a semantic meaning, it should use semantic colors.

  • StatusVariantEnum.NEUTRAL by default.
  • reflected