# Inline Notification
> Inline Notification displays a contextual message within the surrounding content, conveying success, warning, error, or informational feedback.

## Import

```jsx
import { InlineNotification } from '@volue/wave-react';
```

## Examples

### Sizes

`InlineNotification` supports two sizes: `medium` and `small`. The default size is `medium`.

```jsx
<Flex flow="column">
  <InlineNotification type="info" size="medium">
    This is a medium inline notification.
  </InlineNotification>
  <InlineNotification type="info" size="small">
    This is a small inline notification.
  </InlineNotification>
</Flex>
```

### Types

There are four types of `InlineNotification`: `success`, `warning`, `error`, and `info`. The default type is `info`.

```jsx
<Flex flow="column">
  <InlineNotification type="success">
    This is a success inline notification.
  </InlineNotification>
  <InlineNotification type="warning">
    This is a warning inline notification.
  </InlineNotification>
  <InlineNotification type="error">
    This is an error inline notification.
  </InlineNotification>
  <InlineNotification type="info">
    This is an info inline notification.
  </InlineNotification>
</Flex>
```

### Emphasis

`InlineNotification` supports two emphasis styles: `regular` (default) and `bold`. Bold emphasis tints the message text to match the type, reinforcing the severity or importance of a message.

```jsx
<Flex flow="column">
  <InlineNotification type="success" emphasis="bold">
    This is a success inline notification.
  </InlineNotification>
  <InlineNotification type="warning" emphasis="bold">
    This is a warning inline notification.
  </InlineNotification>
  <InlineNotification type="error" emphasis="bold">
    This is an error inline notification.
  </InlineNotification>
  <InlineNotification type="info" emphasis="bold">
    This is an info inline notification.
  </InlineNotification>
</Flex>
```

## API Reference

| Name       | Type                                          | Default     | Description                                                                                                                                                                                      | Required |
| ---------- | --------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- |
| `css`      | `StitchesCSS`                                 |             | Custom CSS styles to apply to the component. Wave uses [Stitches](https://stitches.dev/) under the hood with a fully-typed API and support for features like tokens, media queries, or variants. |          |
| `size`     | `"medium" \| "small"`                         | `"medium"`  | The size of the inline notification.                                                                                                                                                             |          |
| `type`     | `"success" \| "warning" \| "error" \| "info"` | `"info"`    | The type of the inline notification.                                                                                                                                                             |          |
| `emphasis` | `"regular" \| "bold"`                         | `"regular"` | Emphasis of the inline notification. Bold tints the message text to match the type.                                                                                                              |          |