Badge3.0
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-badge';
defineCustomElement();
</script>
<anchor-badge>New message</anchor-badge>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-badge>New message</anchor-badge>Sizes
Pass the size prop with value normal or small to display the badge with different sizes.
<anchor-badge size="normal">New message</anchor-badge>
<anchor-badge size="small">New message</anchor-badge>Variants
Pass the variant prop with value highlight, helpful, or neutral to display the different badge variants.
<anchor-badge type="highlight">New message</anchor-badge>
<anchor-badge type="helpful">New message</anchor-badge>
<anchor-badge type="neutral">New message</anchor-badge>Modes
Pass the mode prop with value on-light, or on-light to display the different modes of the badge.
<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>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. |