Badge3.0
Ads by Tryg Careers
Installation
npm i @tryg/vue-ui-libraryUsage
Install the component library as a Vue plugin. This globally registers all Anchor components.
import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';
const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');<template>
<anchor-badge>New message</anchor-badge>
</template>Import only the components you need for optimal bundle size.
<script setup>
import { AnchorBadge } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-badge>New message</anchor-badge>
</template>Sizes
Pass the size prop with value normal or small to display the badge with different sizes.
<script setup>
import { AnchorBadge } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-badge size="normal">New message</anchor-badge>
<anchor-badge size="small">New message</anchor-badge>
</template>Variants
Pass the type prop with value highlight, helpful, or neutral to display the different badge variants.
<script setup>
import { AnchorBadge } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-badge type="highlight">New message</anchor-badge>
<anchor-badge type="helpful">New message</anchor-badge>
<anchor-badge type="neutral">New message</anchor-badge>
</template>Modes
Pass the mode prop with value on-light or on-dark to display the different modes of the badge.
<script setup>
import { AnchorBadge } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-badge type="highlight" mode="on-dark">New message</anchor-badge>
<anchor-badge type="helpful" mode="on-dark">New message</anchor-badge>
<anchor-badge type="neutral" mode="on-dark">New message</anchor-badge>
</template>Accessibility
It's not advisable to depend on the badge's content for accurate announcement.
Instead, consider supplying a comprehensive description, such as using aria-label.
API
anchor-badge
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
mode | mode | Give the badge a mode to specify use on light or dark backgrounds. | "on-dark" | "on-light" | 'on-light' |
size | size | Give the badge a size | "normal" | "small" | 'normal' |
type | type | Give the badge a type to change its appearance | "helpful" | "highlight" | "neutral" | 'neutral' |
uuid | uuid | Give this instance of badge a custom ID, default generated by uuidV4. | string | uuidv4() |
CSS Custom Properties
| Name | Description |
|---|---|
--badge-bg-color-helpful-on-dark | Background color for helpful badge in dark mode |
--badge-bg-color-helpful-on-light | Background color for helpful badge in light mode |
--badge-bg-color-highlight-on-dark | Background color for highlight badge in dark mode |
--badge-bg-color-highlight-on-light | Background color for highlight badge in light mode |
--badge-bg-color-neutral-on-dark | Background color for neutral badge in dark mode |
--badge-bg-color-neutral-on-light | Background color for neutral badge in light mode |
--badge-border-color-neutral-on-dark | Border color for neutral badge in light mode |
--badge-text-color-helpful-on-dark | Text color for helpful badge in dark mode |
--badge-text-color-helpful-on-light | Text color for helpful badge in light mode |
--badge-text-color-highlight-on-dark | Text color for highlight badge in dark mode |
--badge-text-color-highlight-on-light | Text color for highlight badge in light mode |
--badge-text-color-neutral-on-dark | Text color for neutral badge in dark mode |
--badge-text-color-neutral-on-light | Text color for neutral badge in light mode |
--badge-text-line-height-normal | Line height for normal badge |
--badge-text-line-height-small | Line height for small badge |
--badge-text-size-normal | Font size for normal badge |
--badge-text-size-small | Font size for small badge |
Built with StencilJS
| Anchor version | Status | Notes |
|---|---|---|
| 3.0 | Ready for Implementation | This component is in sync with Figma. |