Success Check

A brand-coloured success indicator with a check mark.

Use SuccessCheck when you need a compact, consistent mark for:

Selected state: e.g. the chosen organisation in a list of cards
Completion progress: e.g. finished steps in an upgrade or setup flow

import { SuccessCheck } from 'ui'
 
export function SuccessCheckDemo() {
  return <SuccessCheck />
}

Usage

import { SuccessCheck } from 'ui'
;<SuccessCheck />

Examples

Selected state

Show which option is currently selected. Position the check absolutely in the trailing corner of the selectable item.

'use client'
 
import { useState } from 'react'
import { cn, SuccessCheck } from 'ui'
 
const OPTIONS = ['Production', 'Staging', 'Development']
 
export function SuccessCheckSelected() {
  const [selected, setSelected] = useState(OPTIONS[0])
 
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      {OPTIONS.map((option) => {
        const isSelected = selected === option
 
        return (
          <button
            key={option}
            type="button"
            aria-pressed={isSelected}
            onClick={() => setSelected(option)}
            className={cn(
              'relative flex w-full items-center rounded-md border px-4 py-3 text-left text-sm transition-colors',
              isSelected
                ? 'border-brand bg-brand-200/20 pr-10 dark:bg-brand-300'
                : 'hover:border-default hover:bg-surface-200'
            )}
          >
            {option}
            {isSelected && (
              <SuccessCheck className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2" />
            )}
          </button>
        )
      })}
    </div>
  )
}

Completion progress

Mark finished steps in a linear progress list. Incomplete steps use a plain circle instead.

Preparing complete

Upgrading…

Finalising

import { SuccessCheck } from 'ui'
 
const STEPS = ['Preparing', 'Upgrading', 'Finalising']
 
export function SuccessCheckProgress() {
  const completedThrough = 1
 
  return (
    <div className="flex flex-col gap-3">
      {STEPS.map((step, index) => {
        const isCompleted = index < completedThrough
        const isCurrent = index === completedThrough
 
        return (
          <div key={step} className="flex items-center gap-3">
            {isCompleted ? (
              <SuccessCheck />
            ) : (
              <span
                className={`flex size-5 shrink-0 items-center justify-center rounded-full border ${
                  isCurrent ? 'border-foreground' : 'border-muted bg-overlay-hover'
                }`}
              />
            )}
            <span
              className={`text-sm ${
                isCurrent
                  ? 'text-foreground'
                  : isCompleted
                    ? 'text-foreground-light'
                    : 'text-foreground-lighter'
              }`}
            >
              {isCurrent ? `${step}…` : isCompleted ? `${step} complete` : step}
            </span>
          </div>
        )
      })}
    </div>
  )
}

PreviousSonner

NextSwitch