Badges

Badges labels with a small amount of information. They help draw attention and group information. Badges are not interactive. In our platform badges are used to display the different status types or as notification icon.

Rules

Status badges are used to communicate the state of an action. These are broken up into two groups, "prepping" and "results". Preparing for an action communicates these statuses; queued, pending then running in that order. After the running status a user will be shown only one of these three results; succeeded, errored or failed.

Badge Types

TIP

Status and numeric badges use the same template code

Status

These are used to communicate to the user the state of an action, (ex. submitting a new run or creating a new component). The status badge can be located within a header of a card or have their own column inside of a table. There are 6 different status states:

Queued: This state communicates to the user their action is queued up and in line to run.

Pending: This state communicates to the user their action is getting ready to run.

Running: This state communicates to the user their action is running.

Succeeded: This state communicates to the user their action has successfully finished.

Errored: This state communicates to the user their action has errored and was not able to be processed.

Failed: This state communicates to the user their action has ran but finished with an error.

Queued Pending Running Succeeded Errored Failed
<Badge-Default type="queued" title="Queued"/>

<Badge-Default type="pending" title="Pending"/>

<Badge-Default type="running" title="Running"/>

<Badge-Default type="success" title="Succeeded"/>

<Badge-Default type="error" title="Errored"/>

<Badge-Default type="failed" title="Failed"/>
View Template Code
<template>
    <span :class="`badge badge-pill badge-${type}`"><span>{{title}}</span></span>
</template>

<script>
    export default {
        props: ["type", "title"]
    }
</script>

<style scoped lang="scss">
    @import "styles/_variables";

    .badge {

        font-weight: 600;

        &-queued {
            background-color: lighten($mid, 30%);
            color: darken($mid, 25%);
            @extend .badge-spacing;
        }

        &-pending {
            background-color: lighten($neutral-light, 25%);
            color: darken($neutral-light, 25%);
            @extend .badge-spacing;
        }

        &-running {
            background-color: lighten($primary, 35%);
            color: darken($primary, 25%);
            @extend .badge-spacing;
        }

        &-success {
            background-color: lighten($success, 35%);
            color: darken($success, 25%);
            @extend .badge-spacing;
        }

        &-error {
            background-color: lighten($warning, 35%);
            color: darken($warning, 25%);
            @extend .badge-spacing;
        }

        &-failed {
            background-color: lighten($critical, 35%);
            color: darken($critical, 25%);
             @extend .badge-spacing;
        }

        &-numeric {
            background-color: $critical;
            color: $light-text;
            padding: .5em;
        }
    }

    .badge-spacing {
        padding: .5em 2em;
        letter-spacing: .035em;
    }
</style>

Numeric

Numeric badges contain numeric values and indicate a running tally, such as the number of notifications. The notification badge is always red to grab the user's attention and is located on the top right corner of the notification icon.

12
<Badge-Default type="numeric" title="12"/>
View Template Code
<template>
    <span :class="`badge badge-pill badge-${type}`"><span>{{title}}</span></span>
</template>

<script>
    export default {
        props: ["type", "title"]
    }
</script>

<style scoped lang="scss">
    @import "styles/_variables";

    .badge {

        font-weight: 600;

        &-queued {
            background-color: lighten($mid, 30%);
            color: darken($mid, 25%);
            @extend .badge-spacing;
        }

        &-pending {
            background-color: lighten($neutral-light, 25%);
            color: darken($neutral-light, 25%);
            @extend .badge-spacing;
        }

        &-running {
            background-color: lighten($primary, 35%);
            color: darken($primary, 25%);
            @extend .badge-spacing;
        }

        &-success {
            background-color: lighten($success, 35%);
            color: darken($success, 25%);
            @extend .badge-spacing;
        }

        &-error {
            background-color: lighten($warning, 35%);
            color: darken($warning, 25%);
            @extend .badge-spacing;
        }

        &-failed {
            background-color: lighten($critical, 35%);
            color: darken($critical, 25%);
             @extend .badge-spacing;
        }

        &-numeric {
            background-color: $critical;
            color: $light-text;
            padding: .5em;
        }
    }

    .badge-spacing {
        padding: .5em 2em;
        letter-spacing: .035em;
    }
</style>
Last Updated: 2/1/2019, 9:39:25 AM

← Breadcrumbs →