# Message

Displays various types of messages with customizable content, icons, actions, and closing behavior.

### **Import**
```tsx
import { Message } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { showMessage } from '@app-studio/web';
// This is a functional component named 'DefaultDemo' that renders a Button component from the '../../Button/Button' path.
export const DefaultDemo = () => {
  return (
    <Button
      onClick={() =>
        showMessage(
          'success',
          'Scheduled: Catch up',
          'Friday, February 10, 2023 at 5:57 PM'
        )
      }
    >
      Show Toast
    </Button>
  );
};
```

### **subtitle**
The secondary text content of the message.

- **Type:** `string`
- **Default:** `undefined`
- **Possible Values:** ``

```tsx
import React from 'react';
import { Button } from '@app-studio/web';

import { showMessage } from '@app-studio/web';

export const SubtitleDemo = () => {
  return (
    <Button
      onClick={() =>
        showMessage(
          'error',
          'Error Message',
          'An error occurred while processing your request.'
        )
      }
    >
      Show Toast
    </Button>
  );
};
```

### **variant**
The type or category of the message, influencing its styling.

- **Type:** `MessageType`
- **Default:** `undefined`
- **Possible Values:** `info, warning, error, success`

```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { Horizontal } from 'app-studio';
import { showMessage } from '@app-studio/web';
import { MessageType } from '@app-studio/web';

export const VariantDemo = () => {
  return (
    <Horizontal gap={10}>
      {['info', 'error', 'warning', 'success'].map((variant, index) => (
        <Button
          key={index}
          onClick={() =>
            showMessage(
              variant as MessageType,
              `${variant.toUpperCase()} toast here!`
            )
          }
          isAuto
        >
          Show {variant}
        </Button>
      ))}
    </Horizontal>
  );
};
```

### **title**
The main title or heading of the message.

- **Type:** `string`
- **Default:** `undefined`
- **Possible Values:** ``

```tsx
import React from 'react';
import { Button } from '@app-studio/web';

import { showMessage } from '@app-studio/web';

export const TitleDemo = () => {
  return (
    <Button
      onClick={() => showMessage('info', 'Here is some important information.')}
    >
      Show Toast
    </Button>
  );
};
```

### **isClosable**
Determines if the message can be manually closed by the user.

- **Type:** `boolean`
- **Default:** `false`
- **Possible Values:** `true, false`

```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { Horizontal } from 'app-studio';

import { showMessage } from '@app-studio/web';

export const IsClosableDemo = () => {
  return (
    <>
      <Horizontal gap={10} position="relative">
        <Button
          onClick={() =>
            showMessage(
              'success',
              'Scheduled: Catch up',
              'Friday, February 10, 2023 at 5:57 PM',
              {
                isClosable: true,
              }
            )
          }
        >
          Close Button
        </Button>
      </Horizontal>
    </>
  );
};
```

### **action**
A callback function to execute when the action button is clicked.

- **Type:** `Function`
- **Default:** `undefined`
- **Possible Values:** ``

```tsx
import React from 'react';
import { Button } from '@app-studio/web';
import { showMessage } from '@app-studio/web';
// Defines the `ActionDemo` functional component that encapsulates the button interaction logic.
export const ActionDemo = () => {
  return (
    <Button
      onClick={() =>
        showMessage(
          'success',
          'Scheduled: Catch up',
          'Friday, February 10, 2023 at 5:57 PM'
        )
      }
      isAuto
    >
      Add Calendar
    </Button>
  );
};
```

### **showIcon**
Determines if an icon corresponding to the message variant should be displayed.

- **Type:** `boolean`
- **Default:** `false`
- **Possible Values:** `true, false`

```tsx
import React from 'react';
import { Button } from '@app-studio/web';

import { showMessage } from '@app-studio/web';

export const ShowIconDemo = () => {
  return (
    <Button
      onClick={() =>
        showMessage(
          'warning',
          'Scheduled: Catch up',
          'Friday, February 10, 2023 at 5:57 PM',
          {
            showIcon: true,
          }
        )
      }
    >
      Add Calendar
    </Button>
  );
};
```

### **timeout**
The duration in milliseconds after which the message automatically hides.

- **Type:** `number`
- **Default:** `3000`
- **Possible Values:** ``

```tsx
import React from 'react';
import { Button } from '@app-studio/web';

import { showMessage } from '@app-studio/web';

export const TimeoutDemo = () => {
  return (
    <Button
      onClick={() =>
        showMessage(
          'info',
          'Info Message',
          'Here is some important information.',
          {
            timeout: 1000,
          }
        )
      }
    >
      Add Calendar
    </Button>
  );
};
```