Alerts

Dialog with one button

All error dialogs have red border, all warning dialogs have yellow border and all confirmation dialogs have green border.

Button styles in the buttons page

Some error message lorem ipsum emet dolor

OK
.layer-under{
    background: #363636;
    opacity: 0.5;
}	
.dialog-one-btn{
    min-height: 120px;
    width: 320px;
    display: block;
    background: #fff;
    text-align: center;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);
    border-top: solid 7px #e74b3b;
    padding: 30px 40px;
    line-height: 18px;
    font-size: 13px;
    font-family: tableau_regular;
}

Dialog with two buttons

Expected keyboard interactions:

Esc key closes the modal and moves focus to whatever triggered the modal to open

Enter key submits modal’s form data, if applicable

Buttons styles in the buttons page

Are you sure you want to enable the 3 selected applications?

Cancel
Enable

Are you sure you start all agents? It can crash lorem ipsum dolor sit amet adipiscing elit.

Cancel
Start All
.layer-under{
    background: #363636;
    opacity: 0.5;
}	
.dialog-two-btns_green{
    min-height: 120px;
    width: 320px;
    display: block;
    background: #fff;
    text-align: left;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.25);
    border-top: solid 7px #27ae60;
    padding: 30px 40px;
    line-height: 18px;
    font-size: 13px;
    font-family: tableau_regular;
 }
 .dialog-two-btns_yellow{
    border-top: solid 7px #ffb81d;
 }

Error Alert

Alerts are available for any length of text, as well as an optional dismiss button.

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

This is a error alert 
.error-alert{
    height: 36px;
    color: #BF382A;
    font-size: 13px;
    background: #FAE7EA;
    text-align: left;
    border-left: 10px solid #BF382A;
    border: 1px solid #BF382A;
    padding: 0px 10px;
    line-height: 36px;
    font-family: tableau_semibold;
 }
span{
    fill: #666;
    cursor: pointer;
}	
span:hover{
    opacity: 0.5;
}

Warning Alert

This is a warning alert 
.warning-alert{
    height: 36px;
    color: #ffb81d;
    font-size: 13px;
    background: #fff4dc;
    text-align: left;
    border-left: 10px solid #ffb81d;
    border: 1px solid #ffb81d;
    padding: 0px 10px;
    line-height: 36px;
    font-family: tableau_semibold;
 }
span{
    fill: #666;
    cursor: pointer;
}	
span:hover{
    opacity: 0.5;
}

Success Alert

This is a success alert 
.success-alert{
    height: 36px;
    color: ##27ae60;
    font-size: 13px;
    background: #eaf7f0;
    text-align: left;
    border-left: 10px solid #27ae60;
    border: 1px solid #27ae60;
    padding: 0px 10px;
    line-height: 36px;
    font-family: tableau_semibold;
 }
span{
    fill: #666;
    cursor: pointer;
}	
span:hover{
    opacity: 0.5;
}