Alert

import { Alert } from './components/elyri/Alert';

export function Example() {
  return (
    <div className="demo-ui-stack">
      <Alert variant="info" title="Info">
        A short supporting message.
      </Alert>
      <Alert variant="success" title="Success">
        A short supporting message.
      </Alert>
      <Alert variant="warning" title="Warning">
        A short supporting message.
      </Alert>
      <Alert variant="danger" title="Danger">
        A short supporting message.
      </Alert>
    </div>
  );
}

import { Alert } from './components/elyri/Alert';

export function Example() {
  return (
    <div className="demo-ui-stack">
      <Alert variant="info" title="Bordered">
        The default alert keeps its border.
      </Alert>
      <Alert variant="info" title="No border" bordered={false}>
        Set bordered={false} to drop the border.
      </Alert>
    </div>
  );
}

import { Alert } from './components/elyri/Alert';

export function Example() {
  return (
    <div className="demo-ui-stack">
      <Alert variant="success" title="Accent">
        Accent coloring is on by default.
      </Alert>
      <Alert variant="success" title="Neutral" accent={false}>
        Set accent={false} for a neutral icon and background.
      </Alert>
    </div>
  );
}

import { useState } from 'react';

import { Alert } from './components/elyri/Alert';

export function Example() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <Alert variant="success" title="Saved" onClose={() => setVisible(false)}>
      Your changes have been stored.
    </Alert>
  );
}