brandv1.0
Utilities
Data Display
Data Entry
Feedback

Badges

Documentation and examples for badges, our small count and labeling component

Contextual variations

Add any preset modifier classes to change the appearance of a badge.

							
                                
<template>
    <!-- HKBadge is a our custom Badge component -->
    <HkBadge variant="primary">Primary</HkBadge>
    <HkBadge variant="secondary">Secondary</HkBadge>
    <HkBadge variant="success">Success</HkBadge>
    <HkBadge variant="danger">Danger</HkBadge>
    <HkBadge variant="warning">Warning</HkBadge>
    <HkBadge variant="info">Info</HkBadge>
    <HkBadge variant="light">Light</HkBadge>
    <HkBadge variant="dark">Dark</HkBadge>
    <HkBadge variant="indigo">indigo</HkBadge>
    <HkBadge variant="pink">pink</HkBadge>
    <HkBadge variant="purple">purple</HkBadge>
    <HkBadge variant="theme">theme</HkBadge>
</template>
Props Value Default
varian=["value"] primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke primary
Pill badges

Use the pill prop to make badges more rounded.

							
                                
<template>
    <!-- HKBadge is a our custom Badge component -->
    <HkBadge variant="primary" pill>Primary</HkBadge>
    <HkBadge variant="secondary" pill>Secondary</HkBadge>
    <HkBadge variant="success" pill>Success</HkBadge>
    <HkBadge variant="danger" pill>Danger</HkBadge>
    <HkBadge variant="warning" pill>Warning</HkBadge>
    <HkBadge variant="info" pill>Info</HkBadge>
    <HkBadge variant="light" pill>Light</HkBadge>
    <HkBadge variant="dark" pill>Dark</HkBadge>
</template>
Props Value Default
pill Boolean false
Outline badges

Use the outline prop to create outline badges.

							
                                
<template>
    <!-- HKBadge is a our custom Badge component -->
    <HkBadge variant="primary" outline>Primary</HkBadge>
    <HkBadge variant="secondary" outline>Secondary</HkBadge>
    <HkBadge variant="success" outline>Success</HkBadge>
    <HkBadge variant="danger" outline>Danger</HkBadge>
    <HkBadge variant="warning" outline>Warning</HkBadge>
    <HkBadge variant="info" outline>Info</HkBadge>
    <HkBadge variant="light" outline>Light</HkBadge>
    <HkBadge variant="dark" outline>Dark</HkBadge>
    <HkBadge variant="primary" pill outline>Primary</HkBadge>
    <HkBadge variant="secondary" pill outline>Secondary</HkBadge>
    <HkBadge variant="success" pill outline>Success</HkBadge>
    <HkBadge variant="danger" pill outline>Danger</HkBadge>
    <HkBadge variant="warning" pill outline>Warning</HkBadge>
    <HkBadge variant="info" pill outline>Info</HkBadge>
    <HkBadge variant="light" pill outline>Light</HkBadge>
    <HkBadge variant="dark" pill outline>Dark</HkBadge>
</template>
Props Value Default
outline Boolean false
Soft badges

Use the soft prop to create soft badges.

							
                                
<template>
    <!-- HKBadge is a our custom Badge component -->
    <HkBadge variant="primary" soft>Primary</HkBadge>
    <HkBadge variant="secondary" soft>Secondary</HkBadge>
    <HkBadge variant="success" soft>Success</HkBadge>
    <HkBadge variant="danger" soft>Danger</HkBadge>
    <HkBadge variant="warning" soft>Warning</HkBadge>
    <HkBadge variant="light" soft>Light</HkBadge>
    <HkBadge variant="dark" soft>Dark</HkBadge>
    <HkBadge variant="info" soft>Info</HkBadge>
    <HkBadge variant="primary" pill soft>Primary</HkBadge>
    <HkBadge variant="secondary" pill soft>Secondary</HkBadge>
    <HkBadge variant="success" pill soft>Success</HkBadge>
    <HkBadge variant="danger" pill soft>Danger</HkBadge>
    <HkBadge variant="warning" pill soft>Warning</HkBadge>
    <HkBadge variant="info" pill soft>Info</HkBadge>
    <HkBadge variant="light" pill soft>Light</HkBadge>
    <HkBadge variant="dark" pill soft>Dark</HkBadge>
</template>
Props Value Default
soft Boolean false
Link Bages

You need to use href prop in <HkBadge> to create link badges, then here you can use all props of <a> tag. 

							
                                
<template>
    <HkBadge href="#" variant="primary">Primary</HkBadge>
    <HkBadge href="#" variant="secondary">Secondary</HkBadge>
    <HkBadge href="#" variant="success">Success</HkBadge>
    <HkBadge href="#" variant="danger">Danger</HkBadge>
    <HkBadge href="#" variant="warning">Warning</HkBadge>
    <HkBadge href="#" variant="info">Info</HkBadge>
    <HkBadge href="#" variant="light">Light</HkBadge>
    <HkBadge href="#" variant="dark">Dark</HkBadge>
    <HkBadge href="#" variant="indigo">indigo</HkBadge>
    <HkBadge href="#" variant="pink">pink</HkBadge>
    <HkBadge href="#" variant="grey">Grey</HkBadge>
    <HkBadge href="#" variant="purple">purple</HkBadge>
    <HkBadge href="#" variant="primary" outline>Primary</HkBadge>
    <HkBadge href="#" variant="secondary" outline>Secondary</HkBadge>
    <HkBadge href="#" variant="success" outline>Success</HkBadge>
    <HkBadge href="#" variant="danger" outline>Danger</HkBadge>
    <HkBadge href="#" variant="warning" outline>Warning</HkBadge>
    <HkBadge href="#" variant="info" outline>Info</HkBadge>
    <HkBadge href="#" variant="light" outline>Light</HkBadge>
    <HkBadge href="#" variant="dark" outline>Dark</HkBadge>
    <HkBadge href="#" variant="indigo" outline>indigo</HkBadge>
    <HkBadge href="#" variant="grey" outline>Grey</HkBadge>
    <HkBadge href="#" variant="pink" outline>pink</HkBadge>
    <HkBadge href="#" variant="purple" outline>purple</HkBadge>
</template>
Sizes

Use the sm prop to create small badges.

							
                                
<template>
    <HkBadge variant="secondary">badge</HkBadge>
    <HkBadge sm variant="secondary">badge-sm</HkBadge>
</template>
Props Value Default
sm Boolean false
Badge indicator

Add indicator or blinkedIndicator props to display badge as an indicator.

Priority
Overdue
Upcoming
Completed
Working
Processing
Not Started
Hold
Canceled 
							
                                
<template>
    <h6>Priority <HkBadge variant="primary" indicator></HkBadge></h6>
    <h6>Overdue <HkBadge variant="danger" blinkedIndicator></HkBadge></h6>
    <h6>Upcoming <HkBadge variant="warning" indicator></HkBadge></h6>
    <h6>Completed <HkBadge variant="success" indicator></HkBadge></h6>
    <h6>Working <HkBadge variant="info" indicator></HkBadge></h6>
    <h6>
        Processing
        <HkBadge variant="primary" blinkedIndicator></HkBadge>
    </h6>
    <h6>Not Started <HkBadge variant="secondary" indicator></HkBadge></h6>
    <h6>Hold <HkBadge variant="light" indicator></HkBadge></h6>
    <h6>Canceled <HkBadge variant="dark" indicator></HkBadge></h6>
</template>
Props Value Default Description
indicator Boolean false Display badge as an indicator
blinkedIndicator Boolean false Display badge as a Blinked indicator
Badge with icon

Add any preset modifier classes to change the appearance of a badge. 

							
                                
<template>
    <HkBadge variant="primary">
        <span>
            <span class="icon">
                <feather-icon name="package" />
            </span>
            badge
        </span>
    </HkBadge>
    <HkBadge variant="primary" sm>
        <span>
            <span class="icon">
                <feather-icon name="package" />
            </span>
            badge sm
        </span>
    </HkBadge>
</template>
Badge indicator sizes

You can create badge indicators of different sizes using the indicatorSize prop in <HkBadge>.

With border
Without border
							
                                
<template>
    <div class="title-sm"><span>With border</span></div>
    <HkBadge indicator indicatorSize="sm" variant="dark"></HkBadge>
    <HkBadge indicator variant="dark"></HkBadge>
    <HkBadge indicator indicatorSize="lg" variant="dark"></HkBadge>
    <HkBadge indicator indicatorSize="xl" variant="dark"></HkBadge>
    <div class="title-sm"><span>Without border</span></div>
    <HkBadge indicator borderless indicatorSize="sm" variant="dark"></HkBadge>
    <HkBadge indicator borderless variant="dark"></HkBadge>
</template>
Props Value Default
indicatorSize sm / lg / xl undefined
borderless Boolean false
Badge with indicator
							
                                
<template>
    <HkBadge variant="primary">
        <span>
            <HkBadge variant="light" indicatorSize="sm" indicator></HkBadge>badge
        </span>
    </HkBadge>
    <HkBadge sm variant="primary">
        <span>
            <HkBadge variant="light" indicatorSize="sm" indicator></HkBadge>badge
        </span>
    </HkBadge>
</template>
Badges with headings

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

h1. Jampack heading New

h2. Jampack heading New

h3. Jampack heading New

h4. Jampack heading New

h5. Jampack heading New
h6. Jampack heading New
							
                                
<template>
    <h1>h1. Jampack heading <HkBadge variant="secondary">New</HkBadge></h1>
    <hr />
    <h2>h2. Jampack heading <HkBadge variant="secondary">New</HkBadge></h2>
    <hr />
    <h3>h3. Jampack heading <HkBadge variant="secondary">New</HkBadge></h3>
    <hr />
    <h4>h4. Jampack heading <HkBadge variant="secondary">New</HkBadge></h4>
    <hr />
    <h5>h5. Jampack heading <HkBadge variant="secondary">New</HkBadge></h5>
    <hr />
    <h6>h6. Jampack heading <HkBadge variant="secondary">New</HkBadge></h6>
</template>
Badge status

Wrap with .badge-status.

Priority
Overdue
Upcoming
Completed
Working
Not Started
Hold
Canceled
							
                                
<template>
    <div>
        <span class="badge-status">
            <HkBadge variant="primary" indicator></HkBadge>
            <span class="badge-label">Priority</span>
        </span>
    </div>
    <div>
        <span class="badge-status">
            <HkBadge variant="danger" indicator></HkBadge>
            <span class="badge-label">Overdue</span>
        </span>
    </div>
    <div>
        <span class="badge-status">
            <HkBadge variant="warning" indicator></HkBadge>
            <span class="badge-label">Upcoming</span>
        </span>
    </div>
    <div>
        <span class="badge-status">
            <HkBadge variant="success" indicator></HkBadge>
            <span class="badge-label">Completed</span>
        </span>
    </div>
    <div>
        <span class="badge-status">
            <HkBadge variant="info" indicator></HkBadge>
            <span class="badge-label">Working </span>
        </span>
    </div>
    <div>
        <span class="badge-status">
            <HkBadge variant="secondary" indicator></HkBadge>
            <span class="badge-label">Not Started</span>
        </span>
    </div>
    <div>
        <span class="badge-status">
            <HkBadge variant="light" indicator></HkBadge>
            <span class="badge-label">Hold</span>
        </span>
    </div>
    <div>
        <span class="badge-status">
            <HkBadge variant="dark" indicator></HkBadge>
            <span class="badge-label">Canceled</span>
        </span>
    </div>
</template>
Button badges

Badges can be used as part of links or buttons to provide a counter.

							
                                
<template>
    <BButton variant="primary">
        Notifications <HkBadge variant="light">15</HkBadge>
    </BButton>
    <BButton variant="secondary">
        Profile <HkBadge variant="light">9</HkBadge>
    </BButton>
    <BButton variant="info"> 
        Cart<HkBadge variant="light">4</HkBadge> 
    </BButton>
    <BButton variant="success">
        Inbox <HkBadge variant="light">72</HkBadge>
    </BButton>
    <BButton variant="danger">
        Draft <HkBadge variant="light">5</HkBadge>
    </BButton>
    <BButton variant="warning">
        Tasks <HkBadge variant="light">6</HkBadge>
    </BButton>
    <BButton variant="light">
        Project <HkBadge varian="primary">18</HkBadge>
    </BButton>
</template>