Alerts

import {Provider} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <Alert displayType="info" title="Info" role={null}>
          This is an info message.
        </Alert>

        <Alert displayType="success" title="Success" role={null}>
          This is a success message.
        </Alert>

        <Alert displayType="warning" title="Warning" role={null}>
          This is a warning message.
        </Alert>

        <Alert displayType="danger" title="Danger" role={null}>
          This is a danger message.
        </Alert>
      </div>
    </Provider>
  );
}

import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <div className="c-mt-3">
          <Alert
            actions={
              <Button.Group spaced>
                <Button displayType="warning" small>
                  Replace
                </Button>
                <Button alert>Keep Both</Button>
              </Button.Group>
            }
            displayType="warning"
            onClose={() => {}}
            title="Alert"
            variant="inline"
          >
            A file with this name already exists.
          </Alert>
        </div>

        <Alert displayType="info" title="Info" variant="stripe" role={null}>
          This is a stripe variant.
        </Alert>

        <div className="c-mt-3">
          <Alert
            displayType="success"
            title="This is an inline variant."
            variant="inline"
            role={null}
          />
        </div>

        <div className="c-mt-3">
          <Alert
            displayType="danger"
            title="This is a feedback variant."
            variant="feedback"
            role={null}
          />
        </div>
      </div>
    </Provider>
  );
}

import {Provider} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <Alert
          displayType="info"
          symbol="thumbs-up-full"
          title="Info"
          variant="stripe"
          role={null}
        >
          This is a stripe variant.
        </Alert>
      </div>
    </Provider>
  );
}

import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <Alert displayType="info" title="With a Button" role={null}>
          This is an alert with a button!
          <Alert.Footer>
            <Button alert>View</Button>
          </Alert.Footer>
        </Alert>
      </div>
    </Provider>
  );
}

import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React from 'react';

export default function App() {
  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <Alert
          actions={<Button alert>View</Button>}
          displayType="info"
          title="With a Button"
          variant="inline"
          role={null}
        >
          This is an alert with a button!
        </Alert>
      </div>
    </Provider>
  );
}

import {Provider, Button} from '@clayui/core';
import Alert from '@clayui/alert';
import React, {useState} from 'react';

export default function App() {
  const [toastItems, setToastItems] = useState([]);

  return (
    <Provider spritemap="/icons.svg">
      <div className="p-4">
        <div>
          <Button
            onClick={() => setToastItems([...toastItems, Math.random() * 100])}
          >
            Add Alert
          </Button>
        </div>

        <Alert.ToastContainer>
          {toastItems.map((value) => (
            <Alert
              autoClose={5000}
              key={value}
              onClose={() => {
                setToastItems((prevItems) =>
                  prevItems.filter((item) => item !== value)
                );
              }}
              title="Hola:"
            >
              My value is {value}
            </Alert>
          ))}
        </Alert.ToastContainer>
      </div>
    </Provider>
  );
}