Status Indicator

The StatusIndicatorComponent displays a status indicator with an icon and text. It supports various status types (error, success, warning, unknown, inactive, pending), customizable icon sizes, and optional tooltips for additional information.

Examples

Example 1: Basic Usage

Display status indicators with different status types:

Status Types

Error
Success
Warning
unknown
Inactive
Pending

Icon Size (T-Shirt Sizing)

Error
Success
Warning

Icon Size (Number)

unknown
Inactive
Pending

import {StatusIndicatorComponent} from 'clr-lift';
import {Component} from '@angular/core';

@Component({
  imports: [StatusIndicatorComponent],
  template: `
    <cll-status-indicator [iconStatus]="'error'" [iconSize]="'sm'"> Error </cll-status-indicator>
    <cll-status-indicator [iconStatus]="'success'" [iconSize]="'24'"> Success </cll-status-indicator>
    <cll-status-indicator [iconStatus]="'warning'"> Warning </cll-status-indicator>
  `
})
export class StatusIndicatorExampleComponent {}

Example 2: Icon with Tooltip

Add tooltips to status indicators for additional information. Hover your mouse over the icons below:

Error
Success
Warning
unknown
Inactive
Pending

import {StatusIndicatorComponent} from 'clr-lift';
import {Component} from '@angular/core';

@Component({
  imports: [StatusIndicatorComponent],
  template: `
    <cll-status-indicator
      [iconStatus]="'pending'"
      [tooltip]="'some pending happen'"
      [tooltipPosition]="'tooltip-left'"
    >
      Pending
    </cll-status-indicator>
  `
})
export class StatusIndicatorTooltipExampleComponent {}

API Reference

StatusIndicatorComponent

Component for displaying status indicators with icons and text.

Inputs

iconStatus: 'error' | 'success' | 'warning' | 'unknown' | 'inactive' | 'pending'
(Required) The status type that determines the icon and color displayed.
iconSize?: 'sm' | 'md' | 'lg' | number
(Optional) The size of the icon. Can be a t-shirt size ('sm', 'md', 'lg') or a number in pixels. Defaults to 'md'.
tooltip?: string
(Optional) Tooltip text to display when hovering over the icon. If provided, a tooltip will be shown.
tooltipPosition?: string
(Optional) Position of the tooltip relative to the icon. Options include 'tooltip-top-left', 'tooltip-top-right', 'tooltip-bottom-left', 'tooltip-bottom-right', 'tooltip-left', etc.