Alert

import PAlert from 'pure-uikit/dist/react/alert';
import PIcon from 'pure-uikit/dist/react/icon';

const App = () => (
  <PAlert open>
    <PIcon slot="icon" name="info-circle" />
    This is a standard alert. You can customize its content and even the icon.
  </PAlert>
);

import PAlert from 'pure-uikit/dist/react/alert';
import PIcon from 'pure-uikit/dist/react/icon';

const App = () => (
  <>
    <PAlert variant="primary" open>
      <PIcon slot="icon" name="info-circle" />
      <strong>This is super informative</strong>
      <br />
      You can tell by how pretty the alert is.
    </PAlert>

    <br />

    <PAlert variant="success" open>
      <PIcon slot="icon" name="check2-circle" />
      <strong>Your changes have been saved</strong>
      <br />
      You can safely exit the app now.
    </PAlert>

    <br />

    <PAlert variant="neutral" open>
      <PIcon slot="icon" name="gear" />
      <strong>Your settings have been updated</strong>
      <br />
      Settings will take effect on next login.
    </PAlert>

    <br />

    <PAlert variant="warning" open>
      <PIcon slot="icon" name="exclamation-triangle" />
      <strong>Your session has ended</strong>
      <br />
      Please login again to continue.
    </PAlert>

    <br />

    <PAlert variant="danger" open>
      <PIcon slot="icon" name="exclamation-octagon" />
      <strong>Your account has been deleted</strong>
      <br />
      We're very sorry to see you go!
    </PAlert>
  </>
);

import { useState } from 'react';
import PAlert from 'pure-uikit/dist/react/alert';
import PIcon from 'pure-uikit/dist/react/icon';

const App = () => {
  const [open, setOpen] = useState(true);

  function handleHide() {
    setOpen(false);
    setTimeout(() => setOpen(true), 2000);
  }

  return (
    <PAlert open={open} closable onPAfterHide={handleHide}>
      <PIcon slot="icon" name="info-circle" />
      You can close this alert any time!
    </PAlert>
  );
};

import PAlert from 'pure-uikit/dist/react/alert';

const App = () => (
  <PAlert variant="primary" open>
    Nothing fancy here, just a simple alert.
  </PAlert>
);

import { useState } from 'react';
import PAlert from 'pure-uikit/dist/react/alert';
import PButton from 'pure-uikit/dist/react/button';
import PIcon from 'pure-uikit/dist/react/icon';

const css = `
  .alert-duration p-alert {
    margin-top: var(--p-spacing-medium);
  }
`;

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div className="alert-duration">
        <PButton variant="primary" onClick={() => setOpen(true)}>
          Show Alert
        </PButton>

        <PAlert variant="primary" duration="3000" open={open} closable onPAfterHide={() => setOpen(false)}>
          <PIcon slot="icon" name="info-circle" />
          This alert will automatically hide itself after three seconds, unless you interact with it.
        </PAlert>
      </div>

      <style>{css}</style>
    </>
  );
};

import { useRef } from 'react';
import PAlert from 'pure-uikit/dist/react/alert';
import PButton from 'pure-uikit/dist/react/button';
import PIcon from 'pure-uikit/dist/react/icon';

function showToast(alert) {
  alert.toast();
}

const App = () => {
  const primary = useRef(null);
  const success = useRef(null);
  const neutral = useRef(null);
  const warning = useRef(null);
  const danger = useRef(null);

  return (
    <>
      <PButton variant="primary" onClick={() => primary.current.toast()}>
        Primary
      </PButton>

      <PButton variant="success" onClick={() => success.current.toast()}>
        Success
      </PButton>

      <PButton variant="neutral" onClick={() => neutral.current.toast()}>
        Neutral
      </PButton>

      <PButton variant="warning" onClick={() => warning.current.toast()}>
        Warning
      </PButton>

      <PButton variant="danger" onClick={() => danger.current.toast()}>
        Danger
      </PButton>

      <PAlert ref={primary} variant="primary" duration="3000" closable>
        <PIcon slot="icon" name="info-circle" />
        <strong>This is super informative</strong>
        <br />
        You can tell by how pretty the alert is.
      </PAlert>

      <PAlert ref={success} variant="success" duration="3000" closable>
        <PIcon slot="icon" name="check2-circle" />
        <strong>Your changes have been saved</strong>
        <br />
        You can safely exit the app now.
      </PAlert>

      <PAlert ref={neutral} variant="neutral" duration="3000" closable>
        <PIcon slot="icon" name="gear" />
        <strong>Your settings have been updated</strong>
        <br />
        Settings will take effect on next login.
      </PAlert>

      <PAlert ref={warning} variant="warning" duration="3000" closable>
        <PIcon slot="icon" name="exclamation-triangle" />
        <strong>Your session has ended</strong>
        <br />
        Please login again to continue.
      </PAlert>

      <PAlert ref={danger} variant="danger" duration="3000" closable>
        <PIcon slot="icon" name="exclamation-octagon" />
        <strong>Your account has been deleted</strong>
        <br />
        We're very sorry to see you go!
      </PAlert>
    </>
  );
};