AisBadge

Badge Component

Props

Variant

The variant prop accepts the standard variants and dictates the badge styles. The variants are: primary, secondary, default, plain, info, success, warning, and danger. The default value is default.

Badge

Primary

Badge

Secondary

Badge

Default

Badge

Plain

Badge

Info

Badge

Success

Badge

Warning

Badge

Danger

<template>
  <div class="docs-example grid gap-y-8">
    <div class="flex items-center space-x-4">
      <Example label="Primary">
        <AisBadge variant="primary">Badge</AisBadge>
      </Example>
      <Example label="Secondary">
        <AisBadge variant="secondary">Badge</AisBadge>
      </Example>
      <Example label="Default">
        <AisBadge variant="default">Badge</AisBadge>
      </Example>
      <Example label="Plain">
        <AisBadge variant="plain">Badge</AisBadge>
      </Example>
    </div>
    <div class="flex items-center space-x-4">
      <Example label="Info">
        <AisBadge variant="info">Badge</AisBadge>
      </Example>
      <Example label="Success">
        <AisBadge variant="success">Badge</AisBadge>
      </Example>
      <Example label="Warning">
        <AisBadge variant="warning">Badge</AisBadge>
      </Example>
      <Example label="Danger">
        <AisBadge variant="danger">Badge</AisBadge>
      </Example>
    </div>
  </div>
</template>

<script setup>
import { AisBadge } from "@ais-public/ais-components";
import Example from "@/components/docs/ComponentExample.vue";
</script>

Outline

The outline prop can be combined with variant to provide an alternate set of badge styles. outline is a boolean prop that can be added without a value. Outline variants use a lighter background with a visible border.

Outline

Default

Outline

Primary

Outline

Secondary

Outline

Plain

Outline

Info

Outline

Success

Outline

Warning

Outline

Danger

<script setup>
import { AisBadge } from "@ais-public/ais-components";
import Example from "@/components/docs/ComponentExample.vue";
import { variants } from "@/util/variants-util";
import { capitalizeFirst } from "@/util/util";
</script>

<template>
  <div class="grid grid-cols-3 md:grid-cols-4 gap-x-4  gap-y-8">
    <Example v-for="variant in variants" :label="capitalizeFirst(variant)">
      <AisBadge :variant="variant" outline
                 hover fast press
      >
        Outline
      </AisBadge>
    </Example>
  </div>
</template>

Alternate

The alternate prop has been deprecated and has been replaced by outline. Please update your usages as alternate will be removed.

Sizes

Thesize prop controls the badge size. The accepted values are: xl, lg, md, sm, and xs. The default value is md.

X-Large

xl

Large

lg

Medium

md

Small

sm

X-Small

xs

<template>
  <div class="docs-example grid gap-y-8">
    <div class="flex items-center space-x-4">
      <Example label="xl">
        <AisBadge size="xl">X-Large</AisBadge>
      </Example>
      <Example label="lg">
        <AisBadge size="lg">Large</AisBadge>
      </Example>
      <Example label="md">
        <AisBadge size="md">Medium</AisBadge>
      </Example>
      <Example label="sm">
        <AisBadge size="sm">Small</AisBadge>
      </Example>
      <Example label="xs">
        <AisBadge size="xs">X-Small</AisBadge>
      </Example>
    </div>
  </div>
</template>

<script setup>
import { AisBadge } from "@ais-public/ais-components";
import Example from "@/components/docs/ComponentExample.vue";
</script>

Font

The font prop sets the badge's font. It will accept one of our three brand fonts: sans, serif, and caps. sans is the default value. (Link to Typography page.)

Sans

sans

Serif

serif

<template>
  <div class="docs-example grid gap-y-8">
    <div class="flex items-center space-x-4">
      <Example label="sans">
        <AisBadge font="sans" size="lg">Sans</AisBadge>
      </Example>
      <Example label="serif">
        <AisBadge font="serif" size="lg">Serif</AisBadge>
      </Example>
    </div>
  </div>
</template>

<script setup>
import Example from "@/components/docs/ComponentExample.vue";
import { AisBadge } from "@ais-public/ais-components";
</script>

Icon

The AisIcon component can be used inside a badge. When using icons in badges, be careful not to make the badge look like a clickable button. Icons on a badge should represent resting states (e.g. locked & unlocked). They should not be used for active states (e.g. busy).

Locked

Locked

Unlocked

Unlocked

<template>
  <div class="docs-example flex flex-wrap gap-4">
    <Example label="Locked">
      <AisBadge variant="secondary">
        <span>Locked</span>
        <AisIcon :icon="faLock" />
      </AisBadge>
    </Example>
    <Example label="Unlocked">
      <AisBadge variant="secondary">
        <span>Unlocked</span>
        <AisIcon :icon="faUnlock" />
      </AisBadge>
    </Example>
  </div>
</template>

<script setup>
import { AisBadge } from "@ais-public/ais-components";
import Example from "@/components/docs/ComponentExample.vue";
import { AisIcon } from "@ais-public/ais-components";

import { faLock, faUnlock } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';

library.add(faLock, faUnlock);
</script>

Component Reference

Props

Property	Type(s)	Required	Default	Description	Deprecated
font	String		'sans'	Set the font of the text inside of the badge Valid values: caps, sans, serif	false
outline	Boolean		false	Applies one of the theme color variants to the border instead of the background. This replaces the deprecated alternate prop	false
size	String		'md'	Set the size of the component's appearance Valid values: xs, sm, md, lg, xl	false
variant	String		'default'	Applies one of the theme color variants to the component Valid values: primary, secondary, default, info, success, warning, danger, plain	false
alternate	Boolean		false	Removes the background color and applies one of the theme color variants to the border Deprecated - Replaced by outline	true

Slots

Name	Scoped	Description
default	No

Events

Event	Arguments	Description