Source: https://app-studio-6167b.web.app/docs/Message

@app-studio/components

# Message

Display application messages with showMessage and a mounted MessageLayout. MessageView supplies the presentation props below.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.view.tsx)

## Import

```ts
import { MessageLayout, showMessage } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { MessageLayout, showMessage } from '@app-studio/components';
import { Button } from '@app-studio/components';

export function MessageExample() {
  return (
    <>
      <Button
        onClick={() =>
          showMessage(
            'success',
            'Changes saved',
            'Your local example is ready.',
            { isClosable: true }
          )
        }
      >
        Show message
      </Button>
      <MessageLayout />
    </>
  );
}
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**MessageView**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `subtitle` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L23) |
| `variant` Required | `"error" \| "info" \| "success" \| "warning"` `"error"``"info"``"success"``"warning"` | `—` | Visual treatment of the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L24) |
| `show` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L25) |
| `hide` Required | `() => void` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L26) |
| `title` Required | `string` | `—` | Main title displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L27) |
| `theme` | `ThemesType` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L28) |
| `isClosable` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L14) |
| `views` | `MessageViewStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L15) |
| `action` | `(() => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L17) |
| `actionText` | `string` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L18) |
| `showIcon` | `boolean` | `false` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L19) |
| `timeout` | `number` | `3000` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Message/Message/Message.props.ts#L20) |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.