Halo

Halo frames an icon with a transparent gap and a low-opacity ring derived from the icon’s color. Use it to give a meaningful status or outcome more presence without adding a filled tile.

Colors

Set one CSS color; the icon uses it directly and the halo derives the same color at 20% opacity. Without color, the component inherits currentColor.

Pair Halo with a circular icon. The round ring reinforces circular glyphs; triangles and other silhouettes look disconnected from it.

Neutral

Info

Success

Attention

Danger

import { Halo, HStack, VStack } from '@vesyl/ui-next'
import { CircleAlert, CircleCheck, CircleMinus, CircleX, Info } from 'lucide-react'

const examples = [
  { label: 'Neutral', color: 'var(--status-neutral)', icon: CircleMinus },
  { label: 'Info', color: 'var(--status-info)', icon: Info },
  { label: 'Success', color: 'var(--status-success)', icon: CircleCheck },
  { label: 'Attention', color: 'var(--status-attention)', icon: CircleAlert },
  { label: 'Danger', color: 'var(--status-danger)', icon: CircleX },
]

export default function HaloColors() {
  return (
    <HStack gap={8} justify="center" align="center" className="flex-wrap">
      {examples.map(({ label, color, icon: Icon }) => (
        <VStack key={label} gap={3} align="center">
          <Halo color={color}>
            <Icon />
          </Halo>
          <span className="text-muted-foreground text-sm">{label}</span>
        </VStack>
      ))}
    </HStack>
  )
}

Sizes

Each size owns the icon, transparent gap, halo thickness, and total footprint as one visual recipe.

Small

Medium

Large

import { Halo, HStack, VStack } from '@vesyl/ui-next'
import { CircleCheck } from 'lucide-react'

const examples = [
  { label: 'Small', size: 'sm' as const },
  { label: 'Medium', size: 'md' as const },
  { label: 'Large', size: 'lg' as const },
]

export default function HaloSizes() {
  return (
    <HStack gap={10} justify="center" align="end" className="flex-wrap">
      {examples.map(({ label, size }) => (
        <VStack key={size} gap={3} align="center">
          <Halo color="var(--status-success)" size={size}>
            <CircleCheck />
          </Halo>
          <span className="text-muted-foreground text-sm">{label}</span>
        </VStack>
      ))}
    </HStack>
  )
}

Size	Icon	Clear gap	Halo	Footprint
`sm`	16px	2px	5px	28px
`md`	24px	2px	7px	40px
`lg`	32px	4px	11px	56px

Notice

Halo works best in spacious, durable feedback such as resolved states, service notices, and full-page outcomes. Compact alerts, status rows, and routine toasts usually need a smaller visual footprint.

No incidents declared

We are not actively mitigating any known incidents at this time.

import { Halo } from '@vesyl/ui-next'
import { CircleCheck } from 'lucide-react'

export default function HaloNotice() {
  return (
    <div className="bg-card flex w-full max-w-2xl items-center gap-5 rounded-xl border p-6">
      <Halo color="var(--status-success)">
        <CircleCheck />
      </Halo>
      <div className="min-w-0">
        <p className="font-medium">No incidents declared</p>
        <p className="text-muted-foreground mt-1 text-sm">
          We are not actively mitigating any known incidents at this time.
        </p>
      </div>
    </div>
  )
}

Usage

import { Halo } from '@vesyl/ui-next'
import { CircleCheck } from 'lucide-react'

<Halo color="var(--status-success)" size="md">
  <CircleCheck />
</Halo>

Reference

Extends <span> props.

Prop	Type	Default	Description
`color`	CSS color	`currentColor`	Base color shared by the icon and translucent halo
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Controls the complete icon, gap, halo, and footprint recipe