---
summary: ステータスやカテゴリを小さなラベルで示す
category: Data Display
---

# Sticker

商品やユーザーなどの対象に付け加える、ステータスやカテゴリを示す小さなラベルです。押して操作するものではなく、表示専用です。ページ内で読んでもらうべきメッセージや注意を伝えるときは Callout を使います。

## 基本の使い方

```tsx
import { Sticker } from 'wip-ui'

<Sticker color="positive">稼働中</Sticker>
```

## 使う場面

- 「稼働中」「停止中」など、対象の状態を示すとき
- 「おすすめ」「新機能」など、対象に補足や強調の情報を添えるとき
- タグやカテゴリなど、対象の分類を示すとき

## 使い方

### 色

- [should] 状態を持たない分類（タグ、カテゴリなど）には neutral を使う
- [should] 「ベータ版」「新機能」など、情報を補足するラベルには informative を使う
- [should] 「稼働中」「承認済み」など、正常・肯定的な状態には positive を使う
- [should] 「停止中」「エラー」など、異常・否定的な状態には negative を使う
- [should] 「要確認」「期限切れ間近」など、注意が必要な状態には notice を使う
- [should] 「おすすめ」「人気」など、ユーザーの注意を積極的に引きたいラベルには attention を使う

### サイズ

- [should] テーブルのセルやリストの項目など、スペースが限られる場面では s を使う

### 内容

- [should] 取りうるラベルの種類が決まっていて、同じ状態なら同じラベルになるものに使う
- [avoid] 「残り3日」「5件」のように、対象ごとに値が変わるものを入れない。文字列で表す
- [avoid] 対象の名前そのものを Sticker で表さない
- [avoid] 1つの対象に、状態を示す Sticker を複数付けない

### 操作

- [avoid] 押して操作できるようにしない。リンクやボタンの代わりにしない

## アクセシビリティ

- [must] 状態や分類はラベルのテキストで伝える。色だけで意味を区別させない

## 実装

- Sticker は `<div>` として描画される
- [avoid] Typography（初期値では `<p>` を描画する）の中に置かない。`<p>` の中に `<div>` を置くことになり、HTML として不正になる

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### Sticker

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| color | "neutral" \| "informative" \| "positive" \| "negative" \| "notice" \| "attention" | neutral | ステッカーのセマンティックカラー |
| size | "s" \| "m" | m | ステッカーのサイズ |