Alert

Basic Usage

This is a basic example of the Alert component.

Enable notifications

const BasicUsageComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>Enable notifications</Button>
      <Alert
        isVisible={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <Alert.Title>Stay in the loop!</Alert.Title>
        <Alert.ConfirmButton onPress={() => setIsOpen(false)}>
          Enable
        </Alert.ConfirmButton>
      </Alert>
    </>
  );
};

Types of alerts

You can use the type prop to change the alert type. Choose between info, warning and error.

Open warning modal

Open info modal

Open error modal

const TypesOfAlerts = () => {
  const [isOpenOne, setIsOpenOne] = React.useState(false);
  const [isOpenTwo, setIsOpenTwo] = React.useState(false);
  const [isOpenThree, setIsOpenThree] = React.useState(false);

  return (
    <>
      <Button accentColor="orange" onPress={() => setIsOpenOne(true)}>
        Open warning modal
      </Button>
      <Button onPress={() => setIsOpenTwo(true)}>Open info modal</Button>
      <Button accentColor="red" onPress={() => setIsOpenThree(true)}>
        Open error modal
      </Button>
      <Alert
        isVisible={isOpenOne}
        onClose={() => setIsOpenOne(false)}
        type="warning"
      >
        <Alert.Title>Your session is about to expire</Alert.Title>
        <Alert.Subheading>
          You'll be logged out in 5 minutes due to inactivity
        </Alert.Subheading>
        <Alert.ConfirmButton onPress={() => setIsOpenOne(false)}>
          Stay signed in
        </Alert.ConfirmButton>
        <Alert.CancelButton>Log out</Alert.CancelButton>
      </Alert>
      {/* ...similar patterns for isOpenTwo and isOpenThree */}
    </>
  );
};

Custom icon

You can use the IconComponent prop to change the alert icon.

Rate this app

const CustomIconComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>Rate this app</Button>
      <Alert
        isVisible={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <Alert.Icon>
          <Star stroke="#000" />
        </Alert.Icon>
        <Alert.Title>Enjoying SpiroKit?</Alert.Title>
        <Alert.ConfirmButton onPress={() => setIsOpen(false)}>
          Rate 5 stars
        </Alert.ConfirmButton>
      </Alert>
    </>
  );
};

Override accent color for buttons

Each component inside the Alert modal can have a different accent color. You can use the accentColor prop to change the accent color of the buttons.

Subscribe to newsletter

const OverrideAccentColorForButtonsComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>
        Subscribe to newsletter
      </Button>
      <Alert
        isVisible={isOpen}
        onClose={() => setIsOpen(false)}
      >
        <Alert.Title>Join our community!</Alert.Title>
        <Alert.ConfirmButton
          accentColor="pink"
          onPress={() => setIsOpen(false)}
        >
          Subscribe
        </Alert.ConfirmButton>
        <Alert.CancelButton accentColor="pink" onPress={() => setIsOpen(false)}>
          No thanks
        </Alert.CancelButton>
      </Alert>
    </>
  );
};

Override color mode

Use the colorMode prop to override the color mode of the Alert component.

Delete account

const OverrideColorModeComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Button onPress={() => setIsOpen(true)}>
        Delete account
      </Button>
      <Alert
        isVisible={isOpen}
        onClose={() => setIsOpen(false)}
        colorMode="dark"
      >
        <Alert.Title>Are you sure you want to leave?</Alert.Title>
        <Alert.Subheading>
          This action cannot be undone and all your data will be permanently
          deleted
        </Alert.Subheading>
        <Alert.ConfirmButton onPress={() => setIsOpen(false)}>
          Delete my account
        </Alert.ConfirmButton>
        <Alert.CancelButton onPress={() => setIsOpen(false)}>
          Keep my account
        </Alert.CancelButton>
      </Alert>
    </>
  );
};

Override accent color

Use the accentColor prop to override the accent color of the Alert component.

Claim your reward

const OverrideAccentColorComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Button accentColor="rose" onPress={() => setIsOpen(true)}>
        Claim your reward
      </Button>
      <Alert
        isVisible={isOpen}
        onClose={() => setIsOpen(false)}
        accentColor="rose"
      >
        <Alert.Title>Congratulations! 🎉</Alert.Title>
        <Alert.Subheading>
          You've earned 500 bonus points for your loyalty
        </Alert.Subheading>
        <Alert.ConfirmButton onPress={() => setIsOpen(false)}>
          Claim now
        </Alert.ConfirmButton>
      </Alert>
    </>
  );
};

Override color mode and accent color

You can override the color mode and the accent color of the Alert component by passing the colorMode and accentColor props at the same time.

Upgrade plan

const OverrideColorModeAndAccentColorComponent = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Button
        accentColor="rose"
        onPress={() => setIsOpen(true)}
      >
        Upgrade plan
      </Button>
      <Alert
        isVisible={isOpen}
        onClose={() => setIsOpen(false)}
        accentColor="rose"
        colorMode="dark"
      >
        <Alert.Title>Unlock premium features</Alert.Title>
        <Alert.Subheading>
          Get unlimited access, priority support, and exclusive content
        </Alert.Subheading>
        <Alert.ConfirmButton onPress={() => setIsOpen(false)}>
          Upgrade now
        </Alert.ConfirmButton>
      </Alert>
    </>
  );
};