@visual-framework/vf-badge

Badge component

About

The vf-badge component is used to denote if a page, section, or link has a production state of alpha, beta or other information.

Usage

The vf-badge accepts a single text item of content.

content type	variable	description
text	text

Links

The vf-badge component can also be a link using <a class="vf-badge" href="">badge title</a>.

Nunjucks and yml options

Nunjucks and YML variables available

variable	options	default
text
badge_href		null
theme	'primary'
style	'outline'
override_class
id

Angular

As of version 3.0.0-alpha.0 vf-badge has experimental Angular support. This package was generated with Angular version 15.2.0 and has been tested on application with Angular version 15.2.0.

• install yarn add @visual-framework/vf-badge
• import in your app.module

  import { VfBadgeAngularModule } from '@visual-framework/vf-badge/vf-badge.angular';
  
  @NgModule({
    imports: [VfBadgeAngularModule, YourOtherModules],
    ...
  })
  

• can be used as

  <vf-badge [text]="'alpha'" [theme]="'primary'" [id]="'Badge1'"></vf-badge>
  

• add to your styles.scss

  @import '../node_modules/@visual-framework/vf-sass-config/index.scss';
  @import "../node_modules/@visual-framework/vf-badge/vf-badge.scss";
  

  you should also install vf-sass-starter for the styles

Usage:

<vf-badge [text]="'alpha'" [theme]="'primary'" [id]="'Badge1'"></vf-badge>

React

As of version 3.0.0-alpha.1 vf-badge has experimental React support which has been tested on react version 18.2.0

• install yarn add @visual-framework/vf-badge
• import in the JS file wheree you want to include this component

  import VfBadge from '@visual-framework/vf-badge/vf-badge.react';
  
  Make sure you have the jsx support enabled with babel. Alternatively, you can also copy the vf-badge.react.js file from below to your react project and import as per the location.
  

• can be used as

  <VfBadge text="ALPHA" theme="primary" id="Badge1"/>
  

• add beloow to your CSS file

  @import '~@visual-framework/vf-sass-config/index.scss';
  @import '~@visual-framework/vf-badge/vf-badge.css';
  

  you should also install and import vf-sass-starter for the styles

Usage:

<VfBadge text="ALPHA" theme="primary" id="Badge1"/>

Install

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

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-badge/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack