Status | CoUI

Status

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

원문 .md 보기 Open in Claude

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 Status(
      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 Status(
      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 Status(
      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 Status(
      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 Status(
      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 Status(
      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 Status(
      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 Status(
      color: CoreStatusColor.primary,
      size: CoreStatusSize.lg,
    );
  }
}

chain

Web

Flutter

Loading Flutter...

class StatusChainExample extends StatefulComponent {
  const StatusChainExample({super.key});

  @override
  State<StatusChainExample> createState() => _StatusChainExampleState();
}

class _StatusChainExampleState extends State<StatusChainExample> {
  @override
  Component build(BuildContext context) {
    return Status(
          color: CoreStatusColor.primary,
          size: CoreStatusSize.lg,
        )
        .withStyle(
          const CoreStatusStyle(
            size: CoreSize.size24,
            color: CoreColor.token(CoreColors.tertiary),
          ),
        )
        .radius16;
  }
}

class StatusChainExample extends StatefulWidget {
  const StatusChainExample({super.key});

  @override
  State<StatusChainExample> createState() => _StatusChainExampleState();
}

class _StatusChainExampleState extends State<StatusChainExample> {
  @override
  Widget build(BuildContext context) {
    return const Status(
          color: CoreStatusColor.primary,
          size: CoreStatusSize.lg,
        )
        .withStyle(
          const CoreStatusStyle(
            size: CoreSize.size24,
            color: CoreColor.token(CoreColors.tertiary),
          ),
        )
        .radius16;
  }
}

사용 시기 (When to Use)#

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

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

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

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

기본 사용법 (Basic Usage)#

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

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

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

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

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

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

빠른 오버라이드 (Chain)#

이미 만든 Status 인스턴스에 스타일을 빠르게 덧붙이고 싶다면 withStyle 체인을 쓸 수 있습니다. 생성자의 style 슬롯 인자와 동일하게 동작하지만, 이미 구성된 위젯 위에서 바로 이어 쓸 수 있습니다. .radius4처럼 Core 토큰 상수 이름과 똑같은 이름의 getter도 있습니다 — withStyle을 한 번 더 줄인 sugar로, 이름이 곧 값이라(radius4 == CoreRadius.radius4) 어느 컴포넌트에서 써도 뜻이 갈리지 않습니다.

class StatusChainExample extends StatefulWidget {
  const StatusChainExample({super.key});

  @override
  State<StatusChainExample> createState() => _StatusChainExampleState();
}

class _StatusChainExampleState extends State<StatusChainExample> {
  @override
  Widget build(BuildContext context) {
    return const Status(
          color: CoreStatusColor.primary,
          size: CoreStatusSize.lg,
        )
        .withStyle(
          const CoreStatusStyle(
            size: CoreSize.size24,
            color: CoreColor.token(CoreColors.tertiary),
          ),
        )
        .radius16;
  }
}

class StatusChainExample extends StatefulComponent {
  const StatusChainExample({super.key});

  @override
  State<StatusChainExample> createState() => _StatusChainExampleState();
}

class _StatusChainExampleState extends State<StatusChainExample> {
  @override
  Component build(BuildContext context) {
    return Status(
          color: CoreStatusColor.primary,
          size: CoreStatusSize.lg,
        )
        .withStyle(
          const CoreStatusStyle(
            size: CoreSize.size24,
            color: CoreColor.token(CoreColors.tertiary),
          ),
        )
        .radius16;
  }
}

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'`	스크린 리더용 접근성 라벨
`statusStyle`	`CoreStatusStyle?`	`null`	인스턴스 단위 chrome / dimensional override (size, color, borderRadius 직접 지정)

스타일 시스템 (Style System)#

`CoreStatusStyle` 필드#

필드	타입	설명
`size`	`double?`	Status dot size override (logical px). When non-null, overrides the size resolved from [defaultsBySize] for the variant. Raw double — single-axis pixel value (verify.md u-1 exception).
`color`	`CoreColor?`	Status dot colour override. When non-null, overrides the colour resolved from [defaultsByColor] for the variant.
`borderRadius`	`CoreBorderRadius?`	Status dot border radius override. When non-null, overrides [defaultBorderRadius] (the full pill / circle radius).

동작 스펙 (Behavior)#

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

사용 가이드라인 (Usage Guidelines)#

✅ Do#

색만으로 상태를 전달하지 말고 semanticLabel을 함께 주기

Status(
  color: CoreStatusColor.success,
  semanticLabel: 'Online',
)

semanticLabel이 없으면 Flutter는 시맨틱을 아예 만들지 않아 스크린 리더가 점을 건너뜁니다. 상태를 색상 하나로만 전달하면 스크린 리더 사용자와 색맹 사용자 모두에게 그 의미가 사라지므로, 무엇의 상태인지 말해주는 라벨을 항상 함께 주세요.

❌ Don't#

숫자·텍스트 라벨이 필요한 곳에 사용하지 않기

// ❌ 읽지 않은 알림 개수를 표시하려는 의도
Status(color: CoreStatusColor.error)

Status는 원형 점 하나만 그리는 컴포넌트라 숫자나 텍스트를 표시할 수 없습니다. 알림 개수 같은 값은 Badge를 사용하세요.

접근성 (Accessibility)#

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

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

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

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

Status

Status#

Live Preview#

사용 시기 (When to Use)#

기본 사용법 (Basic Usage)#

빠른 오버라이드 (Chain)#

Props / Parameters#

스타일 시스템 (Style System)#

CoreStatusStyle 필드#

동작 스펙 (Behavior)#

사용 가이드라인 (Usage Guidelines)#

✅ Do#

❌ Don't#

접근성 (Accessibility)#

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

관련 컴포넌트 (Related Components)#

`CoreStatusStyle` 필드#