インラインバッジ

React コンポーネントでこのスタイルを使うには、span 要素に sl-badge クラスを付けます。

import { InlineBadge } from '~/components';

### Alpha <InlineBadge preset="alpha" />

### Beta <InlineBadge preset="beta" />

### Deprecated <InlineBadge preset="deprecated" />

### Early Access <InlineBadge preset="early-access" />

### Legacy <InlineBadge preset="legacy" />

### Default <InlineBadge text="Default" />

preset、または text と variant のいずれかを指定する必要があります。

• alpha

  • Text: Alpha
  • Variant success

• beta

  • Text: Beta
  • Variant caution

• deprecated

  • Text: Deprecated
  • Variant danger

• early-access

  • Text: Early Access
  • Variant note

• legacy

  • Text: Legacy
  • Variant danger

任意の文字列です。

• note

  • Color: 青

• tip

  • Color: 紫

• danger

  • Color: 赤

• caution

  • Color: オレンジ

• success

  • Color: 緑