`<c-status>`

Examples

Basic

Vue

React

Angular

TypeScript

<template>
  <div class="example-row">
    <c-status>Default</c-status>

    <c-status type="info">Pending</c-status>

    <c-status type="success">Active</c-status>

    <c-status type="warning">Expiring</c-status>

    <c-status type="error">Failed</c-status>
  </div>
</template>

API reference

`<c-status>`

Properties

Property	Attribute	Type	Default	Description
`type`	`type`	`CStatusType`	—	Status type

Slots

Slot	Description
`default`	Status text

CSS parts

Style from outside with c-status::part(name) — parts are the library's only styling customization API.

Part	Description
`root`	The status pill wrapping the slotted text

Types

Importable from the package root: import type { … } from '@cscfi/csc-ui'

`CStatusProps`

export interface CStatusProps {
  /**
   * Status type
   *
   * @seeded from csc-ui — verify
   */
  type?: CStatusType;
}

`CStatusType`

Status type of the pill. Each value paints the matching semantic status colours; omitting the attribute renders the neutral primary pill.

export type CStatusType = 'error' | 'info' | 'success' | 'warning';