Components
Alerts
Alerts are used to inform the user of application-wide issues, warnings, or errors. They are also used to provide direct feedback for whether an action was completed successfully or resulted in error.
Inline Alerts
Used for global or persistent alerts related to application-wide issues, warnings, or errors. These alerts may not be dismissible by the user in cases where an action is required, and are always displayed within the main white content container.
Toast Alerts
Used for providing direct feedback on user actions. These alerts may be dismissible via click and/or should also disappear after a set amount of time.
| Status | |
| Info | Used to provide the user with more information or additional context |
| Warning | Used to inform the user when they are about to do something that is destructive or when the result of an action is unexpected, but isn't an error |
| Danger | Used to inform the user that something went wrong. The message should explain the problem and try to provide a next step or an alternative if the user needs to take some action in response |
| Success | Used to tell the user when an interaction or task has been completed successfully |
Best practices
Accessibility
- Use the proper ARIA role:
- "alert" if the user's immediate attention is required
- "alertdialog” if the alert provides actions for the user to perform
Avatars
The avatar component is a circular user photo used in multiple locations throughout the control panel. The avatar component comes in 5 sizes.
| Size | Class | |
| Default | .avatar | width: 30px, height: 30px |
| Extra small | .avatar--xs | width: 14px, height: 14px |
| Small | .avatar--sm | width: 24px, height: 24px |
| Medium | .avatar--md | width: 50px, height: 50px |
| Large | .avatar--lg | width: 70px, height: 70px |
Badges
Badges are used to show status. There are a few different types of badges that can be used.
| Variant | Usage |
|---|---|
| Primary | Used to show neutral status |
| Secondary | Used to show neutral status |
| Success | Used to show positive status |
| Danger | Used to show negative status |
| Info | Used to show informative status |
| Warning | Used to show warning status |
| Rank | Used to show ranking status |
Cards
Cards are used to contain information and provide a clear grouping of related information.
Best practices
When to display people in cards vs. a table
- In general, lists of people should be placed on cards if there is no
subnav 2directly above the listing.
Accessibility
- Content or UI elements should never be placed on the grey background of the control panel but should always be placed within a card.
Dropdowns
Dropdowns are overlays which display a list of links while using a small amount of screen real estate. There are several different contexts in which dropdowns are used in NationBuilder.
Default dropdown
Split dropdown
Split dropdowns allow for two interactions on a related function. The left side of the split functions as a button, such as opening a filter, and the chevron on the right is a dropdown displaying a list of related links, such as a list of saved filters.
Icon only dropdown
The icon only dropdown functions identically to the Default dropdown, except that it displays an icon instead of text.
List dropdown
The list dropdown is a powerful specialized interface which allows users to search, select or edit lists as well as create new ones. List names also display a count of how many people exist within that list. It is primarily used within the navigation of the People section.
Path dropdown
The path dropdown is a powerful specialized interface which allows users to search, select and edit Paths, filter by Abandoned, Active, or Completed as well as create a new path. It is primarily used within the navigation of the People section.
Popovers
Popovers are floating information panels that describe an item being hovered over. Popovers can contain more information than a tooltip. They can include a heading, paragraph text, or in some cases, an image.
Stat boxes
Stat boxes are at-a-glance indicators of statuses found in people's profiles, in the activities dashboard, when viewing membership types, or on some page types. Stat boxes have two components, the stat and the label. Stats can be numerical or boolean.
Best Practices
Accessibility
- Booleans should use the
.on-buttonor.off-button, never words such as “Yes,” “No,” “Is,” or “Is not.”
Tooltip
Tooltips are floating information panels that describe an item being hovered over. Tooltips should contain no more than a sentence of text with no images or links. For longer information, use a popover.
Modals
A modal appears in an overlay on top of the main content in order to focus content and draw attention. Modals can be used to request more information in order to complete the current interaction or to break up an interaction into simpler steps. Typically modals are used for confirmation dialogs.
Default modal
Used to display simple information. This may only be a heading and text, but it may also include a button.
List modal
Used for choosing a list in the people section. From this modal, users can create a new list or add people to a list.
Form modal
Used when there is a modal that submits a form. One place this is used is for inviting people to be admins on the control panel.
Add Remove Modal
Used simply for adding or removing people from a list.
Best practices
- Focus
- When a dialog opens, focus should move to an element inside the dialog
- When the dialog closes, focus should return to the last focused element
- While the dialog is open, prevent tabular focus outside of the dialog
- The element that serves as the dialog container has a role of dialog
- The dialog container element has aria-modal set to true
- The dialog should have a value set for the `aria-labelledby` property that refers to a visible dialog title or a label specified by `aria-label`
- Optionally the `aria-describedby` can be used to provide a description for the dialog
- Users should be able to use the ESC key to close the dialog
Tables
Tables are used to organize large amounts of related information into categories making them easy to scan.
Standard tables
This is a straight-forward Bootstrap 4 table with table cells set to vertically align center. You can override this by using Bootstrap’s alignment utility classes.
Sortable tables
The sortable table allows for reordering of table rows by drag and drop. This table should be used when the order of rows needs to be customizable and mirror the order in which the items exist elsewhere (e.g. navs, featured content sliders).
Nested tables
Nested tables have two levels of hierarchy, nesting child rows under a parent row. This table enables a person to take action on all children on the parent row via the action menu, yet also includes an edit link on each child level. Nested tables should only be used when it’s important to display a parent/child relationship between rows, and when there are less than 5 rows of children per parent.
Notes
Notes are used to inform users about a certain action or input.
Action
Actions are used with the workflows section to show an automations actions. Actions contain reactions and include links to information about an automations reactions.
Comments
Comments are a component of the activity stream and support HTML.