Tag

Penggunaan

import { Tag } from "@govtechmy/myds-react/tag";

export default () => (
  <Tag size="medium" dot={true}>Default</Tag>
  <Tag size="small" dot={false} variant="warning" mode="default">
    <span>Default</span>
  </Tag>
);

Contoh

Variant

Gunakan props variant untuk menukar gaya visual tag. Pilihan yang disokong adalah default, primary, success, danger, dan warning.

Garis Panduan

1. primary berkait dengan jenama produk.
2. success mewakili hasil (outcome) yang berjaya.
3. danger menunjukkan isu kritikal atau ralat (error).
4. warning bertindak untuk memberi amaran kepada pengguna tentang potensi masalah.

Size

Gunakan props size untuk menukar saiz komponen tag. Pilihan yang disokong adalah small, medium, dan large.

Mode

Gunakan props mode untuk menukar jenis komponen tag. Mode default memberikan tag bucu (border radius) yang sedikit bulat, manakala mode pill memberikannya penampilan yang bulat sepenuhnya (rounded).

Dot

Props dot digunakan untuk mengubah penampilan titik di dalam komponen tag. Titik status pilihan ini boleh bertindak sebagai penunjuk visual untuk mewakili keadaan atau status semasa sesuatu item.

Props

Tag