Check out the next generation of Moon DS: moondesignsystem.com

Alert 10.24.13

ARIA
RTL

Alert is a way of informing a user of important changes in a prominent way.

Default

"use client";

import { Alert } from "@heathmont/moon-core-tw";

const Default = () => <Alert>Default alert</Alert>;

export default Default;

    With Title and Message

    You may include optional Title and Message sub-components inside of the parent Alert.

    "use client";

import { Alert } from "@heathmont/moon-core-tw";

const WithTitle = () => (
  <Alert>
    <Alert.Title>Alert title</Alert.Title>
    <Alert.Message>Alert message</Alert.Message>
  </Alert>
);

export default WithTitle;

      With Icons

      You may add optional icons to the Title and Message sub-components.

      "use client";

import { Alert } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const WithIcon = () => (
  <>
    <Alert>
      <Alert.Message>
        <OtherFrame className="text-moon-24" />
        Alert with icon
      </Alert.Message>
    </Alert>
    <Alert>
      <Alert.Title>
        <OtherFrame className="text-moon-24" />
        Alert with title and icon
      </Alert.Title>
      <Alert.Message>Alert message</Alert.Message>
    </Alert>
  </>
);

export default WithIcon;

        With Close button

        You may add an optional Close sub-component to the Alert. You also need to add an onClick event handler to the Close sub-component for proper click handling.

        "use client";

import { useState } from "react";
import { Alert, Button } from "@heathmont/moon-core-tw";

const WithClose = () => {
  const [isVisible, setIsVisible] = useState(true);
  const handleClick = () => setIsVisible(!isVisible);
  if (isVisible)
    return (
      <Alert>
        Click the Close button to hide the Alert
        <Alert.Close onClick={handleClick} />
      </Alert>
    );
  return (
    <Button variant="outline" onClick={handleClick}>
      Show Alert
    </Button>
  );
};

export default WithClose;

          Customization

          In case you need to add some extra styling to the Alert component you can easily use the className property. It applies to the Alert component itself and its Title and Message sub-components. Additionally, you can control the size and color of icons via the className property.

          "use client";

import { Alert } from "@heathmont/moon-core-tw";
import { OtherFrame } from "@heathmont/moon-icons-tw";

const Customization = () => (
  <>
    <Alert>
      <Alert.Message>
        <OtherFrame className="text-moon-24 text-roshi" />
        Generic style with colored icon
      </Alert.Message>
      <Alert.Close />
    </Alert>
    <Alert className="bg-transparent outline outline-1 outline-offset-[-1px] outline-roshi">
      <Alert.Message className="text-roshi">
        <OtherFrame className="text-moon-24" />
        Outline style
      </Alert.Message>
      <Alert.Close />
    </Alert>
    <Alert className="bg-roshi-10">
      <Alert.Message>
        <OtherFrame className="text-moon-24" />
        Colorful style
      </Alert.Message>
      <Alert.Close />
    </Alert>
  </>
);

export default Customization;

            Alert

            These are props specific to the Alert component:

            Name
            Type
            Default
            className
            		string-

            Alert.Title

            These are props specific to the Alert.Title component:

            Name
            Type
            Default
            children
            		"React.ReactNode"-
            className
            		string-

            Alert.Message

            These are props specific to the Alert.Message component:

            Name
            Type
            Default
            children
            		"React.ReactNode"-
            className
            		string-