# Notice

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/notice

The `.notice` component is useful to bring something to the attention of the reader/user, as well as provide feedback on user interaction.

<Notice title="Example notice component">
  <p>This is the the default notice style, without a modifier class.</p>
</Notice>

<div class="docs_oversizedTable">

| File                   | Description | Source      |
| ---------------------- | ----------- | ----------- |
| `component.notice.css` | All notice styles (`.notice`) | [Github][1] |

</div>

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.notice.css

## Playground

<Playground
  client:visible
  template={`<aside class="{classes}">
  <div class="notice_title">
    {icon}
    <strong>{title}</strong>
  </div>
  <p>{body}</p>
</aside>`}
  baseClasses="notice"
  snippets={{
    info: { preview: infoIcon, code: "<svg>[…]</svg>" },
    danger: { preview: dangerIcon, code: "<svg>[…]</svg>" },
    warning: { preview: warningIcon, code: "<svg>[…]</svg>" },
    confirm: { preview: confirmIcon, code: "<svg>[…]</svg>" },
  }}
  controls={[
    { heading: "Variation", items: [
      { type: "select", name: "type", label: "Type", snippet: "icon", default: "", options: [
        { label: "Default", value: "", snippet: "info" },
        { label: "Info", value: "notice-info", snippet: "info" },
        { label: "Danger", value: "notice-danger", snippet: "danger" },
        { label: "Warning", value: "notice-warning", snippet: "warning" },
        { label: "Confirm", value: "notice-confirm", snippet: "confirm" },
      ]},
    ]},
    { heading: "Content", items: [
      { type: "text", name: "title", label: "Title", default: "Pro tip!" },
      { type: "text", name: "body", label: "Body", default: "Notices work without JavaScript." },
    ]},
  ]}
/>

## HTML

### Available modifiers

<div class="docs_oversizedTable">

| Available modifiers           | Description                   |
| ----------------------------- | ----------------------------- |
| `.notice`                     | Default style. Base colors.   |
| `.notice` + `.notice-info`    | Information. Primary colors.  |
| `.notice` + `.notice-danger`  | Error/Danger. Reds.           |
| `.notice` + `.notice-warning` | Warning. Oranges.             |
| `.notice` + `.notice-confirm` | Confirmation/Success. Greens. |

</div>

When using HTML, you'll need to include the SVG icons "manually." All the icons are [available on Github](https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons). If you'd like to use different icons, [Lucide](https://lucide.dev/) is a great resource.

### Custom properties

The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):

<div class="docs_oversizedTable">

| Property                    | Color                     |
| --------------------------- | ------------------------- |
| `--notice-spacing`          | Padding inside Notice.    |
| `--notice-text-color`       | Default text color.       |
| `--notice-background-color` | Default background color. |
| `--notice-border-color`     | Default border color.     |
| `--notice-border-width`     | Default border width.     |
| `--notice-border-radius`    | Default border radius.    |

</div>

## Astro component

<div class="docs_oversizedTable prose">

| Prop         | Type     | Default     | Description                                                 |
| ------------ | -------- | ----------- | ----------------------------------------------------------- |
| `title`      | `string` | `undefined` | Text for the notice header. (Optional.)                     |
| `type`       | `string` | `undefined` | `info`, `danger`, `warning`, `confirm`.                     |
| `class` | `string` | `undefined` | Additional CSS classes, useful for [helper classes](/docs/helpers). |

</div>

## Examples

<ul class="docs_examples">
  <li>
    <Notice type="warning">
      <p>This is a warning notice without a `title` prop.</p>
    </Notice>

    ```astro
    ---
    import Notice from "../../components/Notice.astro";
    ---
    <Notice type="warning">
      <p>This is a warning notice without a `title` prop.</p>
    </Notice>
    ```

  </li>
  <li>
    <Notice title="Congratulation" type="confirm">
      <p>You've read this notice until the end!</p>
    </Notice>

    ```astro
    ---
    import Notice from "../../components/Notice.astro";
    ---
    <Notice title="Congratulation!" type="confirm">
      <p>You've read this notice until the end!</p>
    </Notice>
    ```

  </li>
</ul>

### HTML examples

<ul class="docs_examples">
  <li>
    <Notice title="Default Notice">
      <p>This is the the default notice style, without a modifier class.</p>
    </Notice>

    ```html
    <aside class="notice">
      <div class="notice_title">
        <svg>[…]</svg>
        <strong>Default Notice</strong>
      </div>
      <p>This is the the default […].</p>
    </aside>
    ```

  </li>
</ul>