Alert

Used to highlight potential issues provide confirmations, and direct users' attention to a specific area.

Basic

  • Alert component will display information at a corners of the viewport by setting the open prop to true.

Source Code

import { Alert, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export const Basic = () => {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <>
      <div className="flex gap-4">
        <Button onClick={() => setShowAlert((prev) => !prev)}>Toggle An Alert</Button>
        <Button onClick={() => setShowAlert(true)}>Show Alert</Button>
        <Button onClick={() => setShowAlert(false)}>Hide Alert</Button>
      </div>

Colors

  • Alert component supports 5 colors: red, green, blue, orange, and neutral by setting the color prop.
  • Default color is blue.

Source Code

import {
  Alert,
  AlertProps,
  Button,
  FeedbackMessageColor,
} from '@ocean-network-express/magenta-ui/react';
import { useRef, useState } from 'react';

import { upperFirst } from './helpers';

const ColorOptions = Object.values(FeedbackMessageColor).map((color) => ({
  label: upperFirst(color),

Sizes

  • Alert component supports 4 sizes: sm, md, lg, and responsive by setting the size prop.
  • Default size is lg.

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Alert, AlertProps, Button } from '@ocean-network-express/magenta-ui/react';
import { useRef, useState } from 'react';

import { SizeOptions } from './helpers';

export const Sizes = () => {
  const oldSize = useRef<AlertProps['size']>();
  const [size, setSize] = useState<AlertProps['size']>();

  const handleSizeChange = (option: AlertProps['size']) => () => {
    if (size === option) {

Positions

  • Alert component supports 6 positions: top-left, top-right, bottom-left, bottom-right, top-center, and bottom-center by setting the position prop.
  • Default position is top-right.

Source Code

import { Alert, Button, FeedbackMessagePosition } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

import { upperFirst } from './helpers';

export const PositionOptions = Object.values(FeedbackMessagePosition).map((position) => ({
  label: position.split('-').map(upperFirst).join(' '),
  value: position,
  name: position.split('-').join(' '),
}));

export const Position = () => {

Prefix Icon

  • Alert supports icons from the @ocean-network-express/magenta-ui/icons package.
  • The prop icon support to add icon or other content to the left side.

Source Code

import { CheckCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Alert, Button, Toggle } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export const PrefixIcon = () => {
  const [showAlert, setShowAlert] = useState(false);
  const [showIcon, setShowIcon] = useState(true);
  return (
    <>
      <div className="flex flex-rows items-center gap-16">
        <Button onClick={() => setShowAlert((prev) => !prev)}>Click to alert message</Button>
        <Toggle checked={showIcon} onChange={() => setShowIcon((prev) => !prev)}>

Alert Actions

1. Alert can include links by passing the urls prop.

The urls prop is an array of objects with the following properties:

  • displayText: The text to display on the link.
  • All other props are the same as the Link component.

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import { Alert, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export const AlertAction = () => {
  const [showAlert, setShowAlert] = useState(false);
  const handleCloseAlert = () => setShowAlert(false);

  return (
    <>
      <Button onClick={() => setShowAlert((prev) => !prev)}>Alert with actions</Button>
      <Alert

2. You can customize urls by passing custom components.

Source Code

import { InfoCircleOutline } from '@ocean-network-express/magenta-ui/icons';
import {
  Alert,
  Button,
  Link,
  Tag,
  TagContent,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export const CustomAlert = () => {

Close an alert

Remove Close Icon Button

  • Alert can remove the close button icon or by setting the closable prop to false.

Source Code

import { Alert, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export const UnClosableAlert = () => {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <>
      <Button onClick={() => setShowAlert((prev) => !prev)}>Un-Closable Alert</Button>
      <Alert
        title="Alert title"
        message="Alert without close icon"
        open={showAlert}

Close duration

  • Alert can be set to automatically call onClose prop after a certain duration.
  • Default duration is 10000ms, it can be changed by passing the duration prop.

Source Code

import { Alert, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export const CloseDurationAlert = () => {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <>
      <Button onClick={() => setShowAlert((prev) => !prev)}>Alert 2000ms duration</Button>
      <Alert
        title="Alert title"
        message="Alert will be auto-closed after 2000 ms."
        onClose={() => setShowAlert(false)}
  • To prevent the toast from closing automatically, set the duration prop to 0 or Infinity.

Source Code

import { Alert, Button } from '@ocean-network-express/magenta-ui/react';
import { useState } from 'react';

export const NotCloseAlert = () => {
  const [showAlert, setShowAlert] = useState(false);
  return (
    <>
      <Button onClick={() => setShowAlert((prev) => !prev)}>Not auto close Alert</Button>
      <Alert
        title="Alert title"
        message="Alert will not be auto-closed."
        onClose={() => setShowAlert(false)}

Was this page helpful?