Badge

Component badge để hiển thị trạng thái, nhãn hoặc số đếm với nhiều biến thể.

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add badge

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add badge

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add badge

bun

bunx @galaxy-stack/nebula-cli@latest add badge

global

# Nếu bạn đã cài đặt galaxy-design toàn cục
galaxy-design add badge

Dependencies

Component này tự động cài đặt các dependencies sau:

• React: class-variance-authority
• Vue: class-variance-authority
• Angular: class-variance-authority
• React Native: nativewind, tailwindcss
• Flutter: Không cần thêm dependencies

Không cần cài đặt thủ công!

Sử dụng

Ví dụ cơ bản

React

import { Badge } from "@/components/ui/badge"

export default function BadgeDemo() {
  return <Badge>Badge</Badge>
}

Vue

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <Badge>Badge</Badge>
</template>

Angular

import { Component } from '@angular/core';
import { BadgeComponent } from '@/components/ui/badge';

@Component({
  selector: 'app-badge-demo',
  standalone: true,
  imports: [BadgeComponent],
  template: `<ui-badge>Badge</ui-badge>`
})
export class BadgeDemoComponent {}

Các biến thể

React

import { Badge } from "@/components/ui/badge"

export default function BadgeVariants() {
  return (
    <div className="flex gap-2">
      <Badge variant="default">Default</Badge>
      <Badge variant="secondary">Secondary</Badge>
      <Badge variant="destructive">Destructive</Badge>
      <Badge variant="outline">Outline</Badge>
    </div>
  )
}

Vue

<script setup lang="ts">
import { Badge } from '@/components/ui/badge'
</script>

<template>
  <div class="flex gap-2">
    <Badge variant="default">Default</Badge>
    <Badge variant="secondary">Secondary</Badge>
    <Badge variant="destructive">Destructive</Badge>
    <Badge variant="outline">Outline</Badge>
  </div>
</template>

API Reference

Props

Prop	Type	Default	Description	Framework Support
variant	`'default'	'secondary'	'destructive'	'outline'`
className / class	string	''	Tên class CSS	Tất cả
asChild	boolean	false	Render như child element	Chỉ React, Vue

Accessibility

• Screen Reader: Sử dụng semantic markup với ARIA attributes
• Focus Management: Kế thừa hành vi focus từ parent
• WCAG Compliance: Tuân thủ WCAG 2.1 Level AA

Author

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

License

MIT © 2025 Bùi Trọng Hiếu (kevinbui)