Nextjs React Bootstrap Sweetalert

Pro Component

Our Nextjs Sweet Alerts are beautiful, responsive, customisable, accessible replacements for Javascript’s popup boxes.
Keep reading our Nextjs Alerts examples and learn how to use this plugin.


Check out more examples on our live preview here.

import React from 'react';
// react component used to create sweet alerts
import SweetAlert from "react-bootstrap-sweetalert";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
// core components
import Button from "components/CustomButtons/Button.js";
// styles for buttons on sweetalert
import styles from "assets/jss/nextjs-material-dashboard-pro/views/sweetAlertStyle.js";

const useStyles = makeStyles(styles);

const sweetAlertStyle = { display: "block", marginTop: "-100px" }

export default function SweetAlertDemo(){
  const classes = useStyles();
  const [alert,setAlert] = React.useState(null);
  const hideAlert = () => {
  const successAlert = () => {
        style={ sweetAlertStyle }
        title="Good job!"
        onConfirm={() => this.hideAlert()}
        onCancel={() => this.hideAlert()}
          classes.button + " " + classes.success
        You clicked the button!
  return (
      <Button color="primary" onClick={this.successAlert.bind(this)}>
        Try me!


If you want to see more examples and properties please check the official react-bootstrap-sweetalert Documentation.

You can also check the Official Github Repository.