Modals

Read about our dashboard design system and its visual components.

Version 1.0
Standard modal

Standard modals look and behave similarly to general purpose cards. Modal headers have a right aligned set of controls for cancelling and closing the modal. Unlike cards, modal header titles are larger and titlecased. Modals are modular and can include other types of elements such as sub navigation.

  • Larger and titlecased header text compared to cards
  • Modal controls a positioned on the top right

Add email filter

Dialog modal

Dialog modals are short and conversational modals that prompt a yes or no action. The body element always contain a question and is followed by the action buttons.

  • Short and conversation based

Discard changes

Are you sure you want to cancel editing this policy and discard all changes?

Large modal

Use large modals for situation where large amount of important information and form elements need to be displayed. Unlike other modals, action buttons are positioned on the right inside the footer and applied as medium sized buttons. Large modals are particularly useful at the beginning of a creation wizard flow or situations where an important one-off form input is required.

  • Useful for one-off form inputs
  • Action buttons are right aligned and at the bottom
  • Header background is shaded

Create Risk Policy

Create a custom policy to manage and define how different types of risk should be handled.

Slide-in modal

If the content and layout inside the modal is complex or require scrolling, using a slide-modal is a great way to house this type of content. By default, slide-in modals span the viewport height making it suitable to house large content. Similarly to a large modal, slide-in modal header background is shaded.

  • Useful for very large content
  • Header background is shaded

Notifications

Suspicious activity for device
Sent always
Type
Slack
Channel
#security-notifications
Suspicious activity for device
Sent always
Type
Webhook
Channel
webhook.address.com/risk-policy-253535