Agnostic

Tags

Tag components can be used as badges or pills that provide categorical information to users. Avoid overuse of tags as users of screen readers and other assistive technologies may find them to be noisy.

Examples

unknown UpperCasE round pill badge 2 success info warning

Usage

astro logo

React, Vue, and Svelte examples on a single playground page 🚀 💥

codesandbox logo View in CodeSandbox Stackblitz logo View in Stackblitz

react logoReact

View source
import "agnostic-react/dist/common.min.css";
import "agnostic-react/dist/esm/index.css";
import { Tag } from "agnostic-react";
export const YourComponent = () => (
  <section>
    <Tag type="success" isUppercase>success</Tag>
    <Tag type="info" isUppercase>info</Tag>
    <Tag type="warning" isUppercase>warning</Tag>
    <Tag type="error" isUppercase>error</Tag>
    <Tag shape="pill" type="success" isUppercase>You did it!</Tag>
    <Tag shape="circle" type="error" isUppercase>2</Tag>
    <Tag shape="round" type="error">Round</Tag>
    <Tag shape="round" type="success">Round</Tag>
  </section>
);

React: component source, storybook tests

Vue 3 logoVue 3

View source
<script setup>
// Import AgnosticUI global common & component CSS
import "agnostic-vue/dist/common.min.css";
import "agnostic-vue/dist/index.css";
import { Tag } from "agnostic-vue";
</script>

<template>
  <section>
    <Tag class="mie6">unknown</Tag>
    <Tag is-uppercase>
      UpperCasE
    </Tag>
    <Tag
      class="mie6"
      shape="round"
      is-uppercase
    >
      round
    </Tag>
    <Tag
      class="mie6"
      shape="pill"
    >
      pill badge
    </Tag>
    <Tag
      class="mie6"
      shape="circle"
      type="error"
    >
      2
    </Tag>
    <Tag
      class="mie6"
      type="success"
    >
      success
    </Tag>
    <Tag
      class="mie6"
      type="info"
    >
      info
    </Tag>
    <Tag
      class="mie6"
      type="warning"
    >
      warning
    </Tag>
  </section>
</template>

Vue 3: component source, storybook tests

Svelte logoSvelte

View source
<script>
  import 'agnostic-svelte/css/common.min.css';
  import { Tag } from "agnostic-svelte";
</script>
<section class="mbe24">
  <Tag>unknown</Tag>
  <Tag shape="round">Rounded</Tag>
  <Tag shape="pill">Badge</Tag>
  <Tag type="success" isUppercase="true">success</Tag>
  <Tag type="info" isUppercase="true">info</Tag>
  <Tag type="warning" isUppercase="true">warning</Tag>
  <Tag type="error" isUppercase="true">error</Tag>
  <Tag type="error" shape="circle">2</Tag>
</section>

Svelte: component source, storybook tests

Angular logoAngular (Experimental)

View source

In your Angular configuration (likely angular.json) ensure you're including the common AgnosticUI styles:

"styles": ["agnostic-angular/common.min.css"],

Add AgnosticUI's AgModule module:



 





 





import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AgModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now you can use in your components:

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `<section>
    <ag-tag>unknown</ag-tag>
    <ag-tag shape="round">rounded</ag-tag>
    <ag-tag shape="pill">badge</ag-tag>
    <ag-tag type="info"
            [isUppercase]="true">info</ag-tag>
    <ag-tag type="success"
            [isUppercase]="true">success</ag-tag>
    <ag-tag type="warning"
            [isUppercase]="true">warning</ag-tag>
    <ag-tag type="error"
            [isUppercase]="true">error</ag-tag>
    <ag-tag type="error"
            shape="circle">2</ag-tag>
  </section>`
})
export class YourComponent {}

Angular: component source, storybook tests

Storybook

You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:

How to run Storybook
git clone git@github.com:AgnosticUI/agnosticui.git
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook

See Running Storybook.