Shards Vue



    Badges are the perfect component for labels and count values.

    Contextual Variations

    Using the theme prop you can easily change the appearance of your badge using the main theme colors: primary, secondary, success, danger, warning, info, light and dark.

        <d-badge theme="primary">Primary</d-badge>
        <d-badge theme="secondary">Secondary</d-badge>
        <d-badge theme="success">Success</d-badge>
        <d-badge theme="danger">Danger</d-badge>
        <d-badge theme="warning">Warning</d-badge>
        <d-badge theme="info">Info</d-badge>
        <d-badge theme="light">Light</d-badge>
        <d-badge theme="dark">Dark</d-badge>
    <!-- badges-1.vue -->

    Pill-Shaped Badges

    Using the pill prop appiles a larger border radius that make your badges to look rounded.

        <d-badge pill theme="primary">Primary</d-badge>
        <d-badge pill theme="secondary">Secondary</d-badge>
        <d-badge pill theme="success">Success</d-badge>
        <d-badge pill theme="danger">Danger</d-badge>
        <d-badge pill theme="warning">Warning</d-badge>
        <d-badge pill theme="info">Info</d-badge>
        <d-badge pill theme="light">Light</d-badge>
        <d-badge pill theme="dark">Dark</d-badge>
    <!-- badges-2.vue -->

    Outline Badges

    Using the outline prop removes the background color and applies a thin border that make your badges to look outlined.

        <d-badge outline theme="primary">Primary</d-badge>
        <d-badge outline theme="secondary">Secondary</d-badge>
        <d-badge outline theme="success">Success</d-badge>
        <d-badge outline theme="danger">Danger</d-badge>
        <d-badge outline theme="warning">Warning</d-badge>
        <d-badge outline theme="info">Info</d-badge>
        <d-badge outline theme="light">Light</d-badge>
        <d-badge outline theme="dark">Dark</d-badge>
    <!-- badges-3.vue -->

    Mixed Effects

    You can also mix both pill and outline props to get mixed results.

        <d-badge outline pill theme="primary">Primary</d-badge>
        <d-badge outline pill theme="secondary">Secondary</d-badge>
        <d-badge outline pill theme="success">Success</d-badge>
        <d-badge outline pill theme="danger">Danger</d-badge>
        <d-badge outline pill theme="warning">Warning</d-badge>
        <d-badge outline pill theme="info">Info</d-badge>
        <d-badge outline pill theme="light">Light</d-badge>
        <d-badge outline pill theme="dark">Dark</d-badge>
    <!-- badges-4.vue -->

    Link Badges

    Using the href or to prop you can turn your badges into regular or router links.

        <d-badge href="#" theme="primary">Primary</d-badge>
        <d-badge href="#" theme="secondary">Secondary</d-badge>
        <d-badge href="#" theme="success">Success</d-badge>
        <d-badge href="#" theme="danger">Danger</d-badge>
        <d-badge href="#" theme="warning">Warning</d-badge>
        <d-badge href="#" theme="info">Info</d-badge>
        <d-badge href="#" theme="light">Light</d-badge>
        <d-badge href="#" theme="dark">Dark</d-badge>
    <!-- badges-5.vue -->

    Inherited Props

    Note: This component is also inheriting the Link component's props.