import { Meta, Story, Canvas, Primary, Controls } from '@storybook/addon-docs/blocks';

import * as Stories from './infomessage.stories.tsx';

<Meta name="Guideline" of={Stories} />

# InfoMessage

This component provides complementary information to the user to help them understand what to do.
A link can be added for more information.

## Style

## Usage

It is used only for non critical information.
It is typically used in forms or in modal to help the user.

<Controls of={Stories.Default} />

## Variations

### Background

This component automatically adapts its background to contrast with its parent element.

<Story of={Stories.WithDifferentBackground} />

## Playground

<Canvas of={Stories.Playground} layout="fullscreen" />
<Controls of={Stories.Playground} />