@patternfly/react-core#ModalBoxFooter JavaScript Examples

The following examples show how to use @patternfly/react-core#ModalBoxFooter. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: AuthModal.js From edge-frontend with Apache License 2.0

5 votes

AuthModal = () => {
  return (
    <Modal
      style={{ padding: '15px' }}
      isOpen={true}
      variant="small"
      onClose={() => (window.location.href = 'https://console.redhat.com/')}
      aria-label="auth-modal"
      header={
        <h2 className="pf-u-pr-xl pf-u-pl-xl pf-u-font-size-2xl pf-u-text-align-center pf-u-font-weight-bold">
          Edge management requires a valid Smart Management subscription
        </h2>
      }
      footer={
        <ModalBoxFooter
          style={{
            display: 'flex',
            justifyContent: 'center',
            width: '100%',
            flexDirection: 'column',
            paddingTop: 0,
          }}
        >
          <Button
            key="get-started"
            component="a"
            className="pf-u-mb-md"
            variant="primary"
            target="_blank"
            href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux/try-it"
          >
            Get started
          </Button>
          <Button
            component="a"
            key="interactive-demo"
            className="pf-u-mb-md"
            variant="secondary"
            target="_blank"
            href="https://red.ht/edgemanagementlab"
          >
            Try the interactive demo
          </Button>
          <Button
            component="a"
            key="not-now"
            variant="link"
            href="https://console.redhat.com/"
          >
            Not now
          </Button>
        </ModalBoxFooter>
      }
      title="Edge management requires a valid subscription"
      width="640px"
    >
      <img
        style={{ margin: '0 auto', display: 'block' }}
        src={edgeIcon}
        width="200px"
        alt="edge icon"
      />
      <p className="pf-u-pr-xl pf-u-pl-xl pf-u-text-align-center">
        Securely manage and scale deployments at the edge with zero-touch
        provisioning, system health visibility, and quick security remediations
        and more with a Red Hat Smart Management subscription
      </p>
    </Modal>
  );
}