# Info

An info component, which can be used to display normal messages, warnings or errors.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { Info } from '@aragon/ui'

function MyApp = () => {
  return <Info title="Title">Some info</Info>
}
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-3bccfb62c4171422f53ff2e9e5a9038b63abf996%2FSchermata%202022-06-26%20alle%2021.00.56.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `mode` <a href="#mode" id="mode"></a>

| TYPE                         | DEFAULT VALUE |
| ---------------------------- | ------------- |
| `"info", "warning", "error"` | `"info"`      |

Set the mode of the Info component. The styles can be individually overriden by `background`, `color`, `borderColor` and `titleColor`.

#### `title` <a href="#title" id="title"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `String` | None          |

Set a title for the info box.

**Example:**

```jsx
<Info title="My title">Some info</Info>
```

#### `background` <a href="#background" id="background"></a>

| TYPE  | DEFAULT VALUE |
| ----- | ------------- |
| Color | None          |

Set the background of the info box.

#### `color` <a href="#color" id="color"></a>

| TYPE  | DEFAULT VALUE |
| ----- | ------------- |
| Color | None          |

Set the text color.

#### `borderColor` <a href="#bordercolor" id="bordercolor"></a>

| TYPE  | DEFAULT VALUE |
| ----- | ------------- |
| Color | None          |

Set the border color of the info box.

#### `titleColor` <a href="#titlecolor" id="titlecolor"></a>

| TYPE  | DEFAULT VALUE |
| ----- | ------------- |
| Color | None          |

Set the title color.