Hudl Design System

Last Modified:August 21, 2017

Modals

Uniform UI provides a modal. Uniform provides design and usage guidelines.

Using the React Component

The modal is built using react-modal, an open-source third-party component. We’ve made this decision for a couple of reasons: It allows us to more quickly release this component and is a commonly used component already employed throughout our products.

Working example of a modal

The suggested method of implementing a modal is by using the component from Uniform-Ui-Components. Given the reliance on React for this component, we don't provide a copy/paste example of the modal's HTML structure. If you need to implement a modal with HTML markup, reach out and we'll help provide guidance.

Uniform-UI-Component

Documentation →

<Modal title="Title of Modal">
  <Text level="small"> You can put content in here </Text>
  <Text level="small"> And more content </Text>
</Modal>
Modals are available in two sizes (default and large).

Uniform-UI-Component

Documentation →

<Modal title="Large Modal">
  <Text level="small"> You can put content in here </Text>
  <Text level="small"> And more content </Text>
</Modal>