Skip to content

DOBT Style Guide

Components

Dropdowns

Basic

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

Multi-Column

Toggle source

Filtering

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

Appearance

Toggle source

Multi-Level

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

Flashes

Toggle source

Alerts

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

Modals

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

Pagination

Left Aligned

Toggle source

Center Aligned

Toggle source

With fewer pages

Toggle source

Compact

#1 of 123
Toggle source

Progress Bars

30%
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

    Tooltips

    Top Right Bottom Left Toggle source