Elements

Info

A small info-icon button that reveals a popover on hover — for an inline explanation next to a label or field.

vue

<UiInfo />

Options

One block per prop — what it does, and what it looks like set.

Text

text is the text content shown inside the popover when no content slot is provided.

Color

color is the color theme of the icon. The colored variants rest at 75% opacity and go to full strength while their popover is open; neutral brightens from muted instead.

Content

content positions the popover relative to the trigger: side, alignment, and offset.

Examples

The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.

`content` — side

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop

Type

Default

Description

text

string

—

The text content shown inside the popover when no `content` slot is provided.

color

'neutral'

The color theme of the icon.

content

PopoverContentProps

{ side: 'top', align: 'center', sideOffset: 8 }

Positioning options for the popover content, such as side, alignment, and offset.

Slots

Slot

content

Types

type Color = "neutral" | "primary" | "secondary" | "success" | "error" | "warning" | "info" | "pending";

interface PopoverContentProps {
    side?: "top" | "right" | "bottom" | "left";
    align?: "start" | "center" | "end";
    sideOffset?: number;
}