Badge

import { Badge } from "@grassroot/ui-react";
 
<Badge>prod</Badge>
<Badge variant="accent">ember</Badge>
<Badge variant="success">healthy</Badge>
<Badge variant="error">down</Badge>

<script setup lang="ts">
import { Badge } from "@grassroot/ui-vue";
</script>
 
<template>
  <Badge>prod</Badge>
  <Badge variant="accent">ember</Badge>
  <Badge variant="success">healthy</Badge>
  <Badge variant="error">down</Badge>
</template>

import { Component } from "@angular/core";
import { GrassrootBadge } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootBadge],
  template: `
    <grassroot-badge>prod</grassroot-badge>
    <grassroot-badge variant="accent">ember</grassroot-badge>
    <grassroot-badge variant="success">healthy</grassroot-badge>
    <grassroot-badge variant="error">down</grassroot-badge>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Badge } from "@grassroot/ui-svelte";
</script>
 
<Badge>prod</Badge>
<Badge variant="accent">ember</Badge>
<Badge variant="success">healthy</Badge>
<Badge variant="error">down</Badge>

import { Badge } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Badge>prod</Badge>
      <Badge variant="accent">ember</Badge>
      <Badge variant="success">healthy</Badge>
      <Badge variant="error">down</Badge>
    </>
  );
}