Skip to content

DOBT Style Guide




When linking to external sites from a dropdown, indicate this with an icon on the right side of the link.

If pressing a link in a dropdown triggers a user flow with additional steps, append an ellipsis to it.

Toggle source


Toggle source


The minus icon inside the first dropdown visually indicates partial selection. In the "Assign to..." dropdown, multiple items are selected. All of them are assigned to Aviv, and some are assigned to Clay.

Toggle source


Toggle source


Dropdowns can also be triggered from regular links. Just add the .dropdown_toggle_link class to any <a> tag.

Toggle source

Rich Text

See the Forms page for more details.

Toggle source


Toggle source


This project is not yet posted.Go liveDismiss
People in this organization can…
Please confirm the information below is correct, and then sign your name below to complete the form.Take me to the signature field
Toggle source


In addition to our default modal style, we have a modal to confirm destructive actions.Toggle source


Left Aligned

Toggle source

Center Aligned

Toggle source

With fewer pages

Toggle source


#1 of 123
Toggle source

Progress Bars

Toggle source

Delete confirmations

Use one of the following patterns to confirm a destructive action.

When the Delete button is an icon, show a popover to clarify the user's intent.

Popovers can contain headers and alternate button text.

  • Project 1
  • Project 2
  • Project 3
Toggle source

When the Delete button contains text, delete the item immediately, and let the user undo the action.

The undo is usually implemented server-side.

  • Delete this response
  • Toggle source

    For destructive actions with major consequences, show a confirmation modal.

    Toggle source


    Top Right Bottom Left Toggle source