Components

Modal

Design
Code

Present a short-term task in a user-initiated layer.

A modal disables the rest of the interface, is always dismissible, and comes with optional actions. Modals are often abused, so use them with care.

Web
React Native
Android
Apple
Other
class AlertExample extends React.Component {
  constructor() {
    super()
    this.state = { isModalOpen: false }
  }

  toggleModalVisibility() {
    this.setState({ isModalOpen: !this.state.isModalOpen });
  }

  render() {
    return (
      <div>
        <Button
          onClick={this.toggleModalVisibility.bind(this)}>
          Show Modal
        </Button>
        <Modal
          isOpen={this.state.isModalOpen}
          onClose={this.toggleModalVisibility.bind(this)}
          title="Invite New Team Members"
          actions={
            <Button
              onClick={() => {}}
              text="Send Invites"
              type="primary"
            />
          }
        >
          Would you like to invite these team members?
        </Modal>
      </div>
    )
  }
}

Props

isOpen

bool

Determines whether or not the modal is displayed.

title

string

What is displayed in the header as the modal title.

onClose

func

Function called when the modal is triggered to close. This is called if and when the Esc key is pressed, the overlay is clicked, the (optional) Cancel button is clicked, or the X is clicked, triggering the modal to close. This is where you might update the isOpen value to false.

actions

arrayOf
button

One or more Button components rendered as actions in the footer. These Buttons are rendered right to left in the order they’re provided.

onAfterOpen

func

Called when the modal is opened.

size

oneOf
string

Determines the size of the modal. This defaults to default, but if you need the modal to be wider, set it to large. This will not affect the height of the modal, only the width. The height of the modal is determined by the height of its content. Once its content reaches a certain height, the modal will no longer become taller. Instead, content will be scrollable.

  • default (default)
  • large

supportingText

string

Rendered on the left side of the footer.

label

string

Value used for the aria-label accessibility tag on the Modal element. Defaults to "Hudl Modal".

showCancelAction

bool

Whether or not to show the cancel button. The cancel button will be shown if any actions are provided. If no actions are provided you can set this to false and then the Cancel action will be hidden as well.

cancelText

any

The translated text shown for the Cancel button. If no translated text is provided, "Cancel" will display, by default.

parentSelector

func

A function that will be called to get the parent element that the modal will be attached to. By default, it will be attached to the body tag.

Notes

  • All modal buttons are rendered as Medium size.
  • The header and footer will remain fixed, even with scrollable content.