---
metaTitle: Info component | AwesCode UI
meta:
  - name: description
    content: The <AwInfo /> component is used to render Info - UI Vue component for AwesCode UI.
title: Info
---

# Info

**Category:** Atom | **Import:** Global

The `AwInfo` component displays information with an optional label and help tooltip.

## Overview

`AwInfo` provides a structured way to display information with a label and optional help icon. It's useful for displaying read-only data in forms or detail views.

## Usage

### Basic Example

```markup
<AwInfo label="Email" text="user@example.com" />
```

### With Help Tooltip

```markup
<AwInfo 
    label="Status" 
    text="Active"
    help="Current account status"
/>
```

### With Custom Content

```markup
<AwInfo label="Details">
    <div>Custom content here</div>
</AwInfo>
```

### Required Field

```markup
<AwInfo label="Name" text="John Doe" required />
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| label | Subtitle/label for the element | `String` | `false` | `''` |
| help | Tooltip text with help icon | `String` | `false` | `''` |
| text | Text content (string or number) | `String` / `Number` | `false` | `''` |
| required | Show required indicator | `Boolean` | `false` | `false` |

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Custom content (replaces text) | - | Text prop value or '—' |
| icon | Custom help icon | - | Default info-circle icon |

### Events

No events are emitted by this component.

## Related Components

- `AwDescription` - Description component
- `AwLabel` - Label component
- `AwInput` - Input component

## Component Behavior

### Label Display
- Label is rendered only when `label` prop is provided
- Label uses `AwDescription` component with `<span>` tag
- When `required` is true, label receives `aw-info__label--required` class for styling

### Help Tooltip
- Help icon appears only when `help` prop is provided
- Tooltip is positioned to the right of the label
- Tooltip uses Vue tooltip directive with `:right.prepend` modifiers
- Default help icon is `info-circle` from AwIconSystemMono
- Help icon can be customized using the `icon` slot

### Content Display
- Default slot takes precedence over `text` prop
- When default slot has content, `text` prop is ignored
- When no slot content and no `text` prop, displays '—' (em dash)
- Slot detection uses `notEmptyNode` utility to filter empty nodes
- Text content is rendered in a `<div>` wrapper

### Structure
```
<div class="aw-info">
  <div class="aw-info__label" [class.aw-info__label--required]>
    <AwDescription tag="span">{{ label }}</AwDescription>
    <slot name="icon">
      <span v-tooltip>
        <AwIconSystemMono name="info-circle" />
      </span>
    </slot>
  </div>
  <slot /> or <div>{{ text || '—' }}</div>
</div>
```

## Notes

- **Import Method:** Global - Available as atom component
- Shows '—' (em dash) when text is empty and no slot content
- Help icon appears when `help` prop is provided
- Default help icon is `info-circle` from system icons
- Use for displaying read-only information in forms or detail views
- Component checks for non-empty slot nodes using `$scopedSlots` API
- Supports both string and number values for `text` prop