Alerts

Show Code Snippets

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Generic
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-generic {
color: #2E2E2E;
background-color: #FFF1DE;
border-color: transparent;}
}

Convey general information or actions that aren’t critical. Update users about a change or give them advice. Include lower priority information and should be dismissible.

Success
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-success {
color: #2E2E2E;
background-color: #B4E76F;
border-color: transparent;}
}

Inform users when actions are successfully completed.

Warning
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-warning {
color: #1F1F1F;
background-color: #FED69F;
border-color: transparent;}
}

Convey general information or actions that aren’t critical. Update users about a change or give them advice. Include lower priority information and should be dismissible.

Error
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-error {
color: #FFFFFF;
background-color: #DB3B21;
border-color: transparent;}
}
Tip
.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-error {
color: #2E2E2E;
background-color: #E4F0FB;
border-color: transparent;}
}

Give a tip and contextual information helpful for the user.

Buttons

Show Code Snippets

Buttons execute an action or change the state of an application. Button text helps users understand what action will occur when they click or tap. Buttons make actions visible. They enable users to change or complete a task. For example use a button to let users confirm a change. Use links in favor of buttons for navigation purposes with the exception of the back and forward button.

Primary

Primary Big

Primary

.alert {
border-radius: 5px;
padding: 12px;
margin-bottom: 0px;
&-generic {
color: #2E2E2E;
background-color: #FFF1DE;
border-color: transparent;}
}
Default

Default Big

Default

Primary + Icon

Primary Big

Primary

Default + Icon

Default Big

Default

Primary Dropdown

Primary Big

Item 1 Item 2

Primary

Item 1 Item 2
Default Dropdown

Default Big

Item 1 Item 2

Default

Item 1 Item 2
Copy Rules
  • When possible, use labels that describe the action or result of selecting the button. Use the same terms to describe the action in both the button and any supporting instructional copy.
  • When using two buttons to present a binary choice, if possible label as “X” and “Don’t X”. This will also help with localization.
  • Use ellipses in buttons when the action requires additional user input, usually via a dialog, an alert or moving the operation to another window or part of the UI.

Forms

Show Code Snippets

We'll never share your email with anyone else.
.form-group {
margin-bottom: 1rem;}

label {
display: inline-block;
margin-bottom: .5rem;}

.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;}

button, input {
overflow: visible;}

.form-text {
display: block;
margin-top: .25rem;
color: #6c757d !important;}

.form-check {
position: relative;
display: block;
padding-left: 1.25rem;}

.form-check-label {
margin-bottom: 0;}

Cards

Briar uses Material Design guidelines for cards on Web and Android UI.