function Alert(props) {
  const {
    className,
    closeClassName,
    closeAriaLabel = 'Close',
    cssModule,
    tag: Tag = 'div',
    color = 'success',
    isOpen = true,
    toggle,
    children,
    transition = {
      ...Fade.defaultProps,
      unmountOnExit: true,
    },
    fade = true,
    innerRef,
    ...attributes
  } = props;

  const classes = mapToCssModules(
    classNames(className, 'alert', `alert-${color}`, {
      'alert-dismissible': toggle,
    }),
    cssModule,
  );

  const closeClasses = mapToCssModules(
    classNames('btn-close', closeClassName),
    cssModule,
  );

  const alertTransition = {
    ...Fade.defaultProps,
    ...transition,
    baseClass: fade ? transition.baseClass : '',
    timeout: fade ? transition.timeout : 0,
  };

  return (
    <Fade
      {...attributes}
      {...alertTransition}
      tag={Tag}
      className={classes}
      in={isOpen}
      role="alert"
      innerRef={innerRef}
    >
      {toggle ? (
        <button
          type="button"
          className={closeClasses}
          aria-label={closeAriaLabel}
          onClick={toggle}
        />
      ) : null}
      {children}
    </Fade>
  );
}
Props to be passed to `Fade` to modify transition