The vf-badge component is used to label a page, part of a page, or a component. The vf-badge component can also be a link using <a class="vf-badge" href="">badge title</a>.
This repository is distributed with npm. After installing npm and yarn, you can install vf-profile with this command.
$ yarn add --dev @visual-framework/vf-badge
The source files included are written in [Sass][sass] (scss) You can simply point your sass include-path at your node_modules directory and import it like this.
@import "@visual-framework/vf-badge/index.scss";
Make sure you import Sass requirements along with the modules.
The vf-badge component is used to denote if a page, section, or link has a production state of alpha, beta or other information.
The vf-badge accepts a single text item of content.
| content type | variable | description |
|---|---|---|
| text | text |
| variable | options | default |
|---|---|---|
| text | ||
| badge_href | null | |
| theme | 'primary', 'secondary', 'tertiary' | |
| style | 'pill', 'rounded', 'square', 'outline' | |
| override_class | ||
| id |
The vf-badge allows for two sets of variants
There are three theme variants available for the component that are primary, secondary, and tertiary. To add a theme to the component you would need to add theme: primary, theme: secondary, or theme: tertiary to the .yml file.
There are four design variants for the component. We have square, pill, and rounded as well as outline. The outline variant can be used along with another variant so the way we write this in code is a little different. To only have a rounded button we should write ["rounded"] but if we wanted to have a rounded button with the outline rather than filled colour we would have to write ["outline", "rounded"].
File system location: components/vf-badge
{% render '@vf-badge--default', {
"component-type": "element",
"text": "alpha"
} %}
<span class="vf-badge">alpha</span>
{% render '@vf-badge--primary', {
"component-type": "element",
"style": [
"outline",
"rounded"
],
"text": "alpha",
"theme": "primary"
} %}
<span class="vf-badge vf-badge--primary vf-badge--outline vf-badge--rounded">alpha</span>
{% render '@vf-badge--secondary', {
"component-type": "element",
"text": "beta",
"theme": "secondary"
} %}
<span class="vf-badge vf-badge--secondary">beta</span>
{% render '@vf-badge--tertiary', {
"component-type": "element",
"text": "alpha",
"theme": "tertiary",
"override_class": "your-extra-class",
"id": "your-id"
} %}
<span id="your-id" class="vf-badge vf-badge--tertiary | your-extra-class">alpha</span>
{% render '@vf-badge--outline', {
"component-type": "element",
"text": "alpha",
"style": [
"outline"
]
} %}
<span class="vf-badge vf-badge--outline">alpha</span>
{% render '@vf-badge--rounded', {
"component-type": "element",
"text": "alpha",
"style": [
"rounded"
]
} %}
<span class="vf-badge vf-badge--rounded">alpha</span>
{% render '@vf-badge--pill', {
"component-type": "element",
"text": "alpha",
"style": [
"pill"
]
} %}
<span class="vf-badge vf-badge--pill">alpha</span>
{% render '@vf-badge--square', {
"component-type": "element",
"style": [
"square"
],
"theme": "primary"
} %}
<span class="vf-badge vf-badge--primary vf-badge--square"></span>
{% render '@vf-badge--phases', {
"component-type": "element",
"text": "alpha",
"theme": "tertiary"
} %}
<span class="vf-badge vf-badge--tertiary">alpha</span>
{% render '@vf-badge--link', {
"component-type": "element",
"badge_href": "JavaScript:Void(0);",
"text": "beta"
} %}
<a href="JavaScript:Void(0);" class="vf-badge">beta</a>
vf-componenet-rollup vf-core-components vf-local-overrides vf-sample This page is part of the components section.