Status | CoUI
LogoCoUI

Status

온라인, 오프라인 등 사용자 또는 시스템 상태를 표시하는 컴포넌트

Status#

사용자 또는 시스템의 현재 상태를 컬러 점으로 표시하는 컴포넌트입니다. 채팅, 사용자 목록, 서버 모니터링 등에 활용합니다.

Live Preview#

default
Web
Flutter
Loading Flutter... 
class StatusDefaultExample extends StatefulComponent {
  const StatusDefaultExample({super.key});

  @override
  State<StatusDefaultExample> createState() => _StatusDefaultExampleState();
}

class _StatusDefaultExampleState extends State<StatusDefaultExample> {
  @override
  Component build(BuildContext context) {
    return CoStatus(
      color: CoreStatusColor.primary,
      size: CoreStatusSize.lg,
    );
  }
}
class StatusDefaultExample extends StatefulWidget {
  const StatusDefaultExample({super.key});

  @override
  State<StatusDefaultExample> createState() => _StatusDefaultExampleState();
}

class _StatusDefaultExampleState extends State<StatusDefaultExample> {
  @override
  Widget build(BuildContext context) {
    return const CoStatus(
      color: CoreStatusColor.primary,
      size: CoreStatusSize.lg,
    );
  }
}
success
Web
Flutter
Loading Flutter... 
class StatusDefaultExample extends StatefulComponent {
  const StatusDefaultExample({super.key});

  @override
  State<StatusDefaultExample> createState() => _StatusDefaultExampleState();
}

class _StatusDefaultExampleState extends State<StatusDefaultExample> {
  @override
  Component build(BuildContext context) {
    return CoStatus(
      color: CoreStatusColor.primary,
      size: CoreStatusSize.lg,
    );
  }
}
class StatusDefaultExample extends StatefulWidget {
  const StatusDefaultExample({super.key});

  @override
  State<StatusDefaultExample> createState() => _StatusDefaultExampleState();
}

class _StatusDefaultExampleState extends State<StatusDefaultExample> {
  @override
  Widget build(BuildContext context) {
    return const CoStatus(
      color: CoreStatusColor.primary,
      size: CoreStatusSize.lg,
    );
  }
}
warning
Web
Flutter
Loading Flutter... 
class StatusDefaultExample extends StatefulComponent {
  const StatusDefaultExample({super.key});

  @override
  State<StatusDefaultExample> createState() => _StatusDefaultExampleState();
}

class _StatusDefaultExampleState extends State<StatusDefaultExample> {
  @override
  Component build(BuildContext context) {
    return CoStatus(
      color: CoreStatusColor.primary,
      size: CoreStatusSize.lg,
    );
  }
}
class StatusDefaultExample extends StatefulWidget {
  const StatusDefaultExample({super.key});

  @override
  State<StatusDefaultExample> createState() => _StatusDefaultExampleState();
}

class _StatusDefaultExampleState extends State<StatusDefaultExample> {
  @override
  Widget build(BuildContext context) {
    return const CoStatus(
      color: CoreStatusColor.primary,
      size: CoreStatusSize.lg,
    );
  }
}
error
Web
Flutter
Loading Flutter... 
class StatusDefaultExample extends StatefulComponent {
  const StatusDefaultExample({super.key});

  @override
  State<StatusDefaultExample> createState() => _StatusDefaultExampleState();
}

class _StatusDefaultExampleState extends State<StatusDefaultExample> {
  @override
  Component build(BuildContext context) {
    return CoStatus(
      color: CoreStatusColor.primary,
      size: CoreStatusSize.lg,
    );
  }
}
class StatusDefaultExample extends StatefulWidget {
  const StatusDefaultExample({super.key});

  @override
  State<StatusDefaultExample> createState() => _StatusDefaultExampleState();
}

class _StatusDefaultExampleState extends State<StatusDefaultExample> {
  @override
  Widget build(BuildContext context) {
    return const CoStatus(
      color: CoreStatusColor.primary,
      size: CoreStatusSize.lg,
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

  • 사용자의 온라인/오프라인 상태를 표시할 때
  • 서버, 서비스의 운영 상태를 표시할 때
  • 아바타 옆에 작은 상태 점을 표시할 때

대신 다른 컴포넌트를 사용하세요:

  • Badge: 숫자나 알림 개수를 표시할 때
  • ValidationBadge: 유효성 검증 결과를 표시할 때

기본 사용법 (Basic Usage)#

// 성공 상태 (온라인)
CoStatus(
  color: CoreStatusColor.success,
  size: CoreStatusSize.lg,
  semanticLabel: 'Online',
)

// 에러 상태
CoStatus(
  color: CoreStatusColor.error,
  size: CoreStatusSize.md,
)

// 경고 상태
CoStatus(
  color: CoreStatusColor.warning,
)

// 성공 상태 (온라인)
CoStatus(
  color: CoreStatusColor.success,
  size: CoreStatusSize.lg,
  semanticLabel: 'Online',
)

// 에러 상태
CoStatus(
  color: CoreStatusColor.error,
  size: CoreStatusSize.md,
)

// 경고 상태
CoStatus(
  color: CoreStatusColor.warning,
)

Props / Parameters#

속성타입기본값설명
color CoreStatusColor neutral 상태 색상 (neutral, primary, secondary, tertiary, info, success, warning, error)
size CoreStatusSize md 점 크기 (xs: 4px, sm: 6px, md: 8px, lg: 12px, xl: 16px)
semanticLabel String? 'status' 스크린 리더용 접근성 라벨

동작 스펙 (Behavior)#

  • 원형 dot으로 렌더링
  • 색상은 CoreStatusColor enum으로 선택
  • 크기는 CoreStatusSize enum으로 선택
  • CoreStatusTheme으로 프로젝트 레벨 size/color override 가능

접근성 (Accessibility)#

  • role="status" 자동 적용
  • aria-label / Semantics label로 스크린 리더 지원
  • semanticLabel 파라미터로 커스텀 라벨 설정

크로스 플랫폼 차이점 (Platform Differences)#

항목FlutterWeb
클래스명CoStatusCoStatus
렌더링 Container + BoxDecoration(circle) span + inline style border-radius: 50%
접근성 Semantics widget role="status" + aria-label

관련 컴포넌트 (Related Components)#

  • Avatar: 아바타 옆에 Status dot을 배치
  • Badge: 숫자/텍스트 라벨이 필요한 경우
  • ValidationBadge: 유효성 검증 결과 표시