---
title: "info"
description: "Display paragraph-style information in a view."
permalink: /docs/runtime/all-ui-components/info/
---
# info

## Overview

Displays text in an app in a paragraph form. The text can be displayed in a single line, or optionally with a label.

### Basic Example

The simplest way to use an `info` component is to specify the text to display between the `<info>` tags.

**main.view\.xml**

```xml
<info>This is the simplest way to use an info component.</info>
```

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-91c2dc59c13ff812a5a4ec6bf36aba6db90428c5-2finfo-example-7a7e01d2.png)

## Standard Attributes

### `value`

<SyntaxCard type="string" defaultValue="unset" />

Specify the text to display inside the `info` component. This is an alternative to specifying the text directly inside the `<info>...</info>` tags.

#### Example: Without `value`

```xml
<info>Info text</info>
```

#### Example: With `value`

```xml
<info value="Info text"/>
```

## Advanced Attributes

### `align-text`

<SyntaxCard type={["center", "left", "right"]} defaultValue="left" />

Specify if the text content of the `info` component.

#### Example: `info` right-aligned text

```xml
<info label="Condition: Faulty" align-text="right">
    The condition of the part has been assessed and it was found to be faulty.
</info>
```

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-b0f997909a2607f63674fb12ea4a40144e436231-2finfo-align-text-a5e73c65.png)

### `align-label`

<SyntaxCard type={["center", "left", "right"]} defaultValue="left" />

Specify how the [`label`](#label) should be aligned.

### `text-color`

<SyntaxCard type="string (named color or #HEX value)" defaultValue="primary font color" />

Specify the text color of the info's text.

### `bind`

<AttributeReference label="bind" href="/docs/runtime/common-component-attributes/bind/" badge="advanced" tone="muted" />

### `id`

<AttributeReference label="id" href="/docs/runtime/common-component-attributes/id/" badge="advanced" tone="muted" />

### `label-case`

<AttributeReference label="label-case" href="/docs/runtime/common-component-attributes/label-case/" badge="advanced" tone="muted" />

### `label-color`

<AttributeReference label="label-color" href="/docs/runtime/common-component-attributes/label-color/" badge="advanced" tone="muted" />

### `show-if`

<AttributeReference label="show-if" href="/docs/runtime/common-component-attributes/show-if/" badge="advanced" tone="muted" />

### `hide-if`

<AttributeReference label="hide-if" href="/docs/runtime/common-component-attributes/hide-if/" badge="advanced" tone="muted" />

## Common Attributes

### `label`

<AttributeReference label="label" href="/docs/runtime/common-component-attributes/label/" />

## Component Methods

The following component methods are available when an [`id`](/docs/runtime/common-component-attributes/id/) is assigned to the component and `component.info({id:'my-id'})` is called from JS/TS:

### `scrollIntoView`

Programmatically scroll until the `info` component is visible in the view.