Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Info with Icon and Badge Hover Card for Ark UI

A Verified badge with a shield opens a card titled Verified Account and a sentence on what that means.

The trigger is a secondary badge labeled Verified, with a shield. The card repeats the shield, titles it Verified Account, and says the account meets the security standards.

Save it for a status whose meaning is not obvious from the word. A Tooltip fits if that explanation shrinks to one line. In React, Ark UI opens this card after a short pause.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Hover Card anatomy: trigger, positioner, arrow, content

Usage

<HoverCard>
  <HoverCardTrigger asChild>
    <button className="rounded-full" type="button">
      <Badge variant="secondary">
        <ShieldIcon aria-hidden="true" data-icon="inline-start" />
        Verified
      </Badge>
    </button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div className="flex gap-3">
      <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-success/10">
        <ShieldIcon aria-hidden="true" className="size-5 text-success" />
      </div>
      <div className="flex flex-col gap-1">
        <h4 className="font-semibold text-sm">Verified Account</h4>
        <p className="text-muted-foreground text-sm">
          This account has been verified by our team and meets our security
          standards.
        </p>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

FAQ

What is in the card?

A shield on a round tinted tile, bg-success/10 behind a text-success icon, beside the title Verified Account and a muted sentence. The tile has shrink-0, so long text wraps instead of squeezing it.

How is the badge made the trigger?

HoverCardTrigger takes asChild, and the demo passes the badge, a button.

Why wrap the Badge in a button?

A Badge is a plain span and can't take focus. The button around it, with rounded-full to follow its shape, gives keyboard users a way to open the card.

How wide is the card?

The default hover card width. Set a width class such as w-80 on the card to fit longer content.

How do I change how fast the card opens and closes?

The card opens a moment after the pointer rests on the trigger and stays up long enough for the pointer to move into it. Both delays are in milliseconds. Set openDelay and closeDelay on HoverCard; they default to 10 and 100. positioning picks another side than the bottom.

Does the card open from the keyboard and on touch screens?

Focusing the badge opens the card, moving focus away or pressing Escape closes it. Touch screens have no hover, so keep what matters reachable elsewhere, or use a Popover when the card has to open on a tap.

API Reference

Hover Card

Sets asChild. The rest is on the Hover Card page.

Badge

Sets variant="secondary". The rest is on the Badge page.

All 20 hover card examples