Badge

Storybook

Примеры​

Размер бейджа​

Размер задается с помощью свойства size. Возможные значения свойтсва: "l", "m", "s".

Live Editor
Result
Open in CodeSandbox

Скругленность бейджа​

Скругленность задается с помощью свойства pilled:

Live Editor
Result
Open in CodeSandbox

Вид бейджа​

Вид бейджа задается с помощью свойства view. Возможные значения свойства view:

  • "default" – основной бейдж;
  • "accent" – бейдж акцентного цвета;
  • "positive" – успешное завершение;
  • "warning" – предупреждение;
  • "negative" – ошибка;
  • "dark" – темный бэйдж;
  • "light" – светлый бэйдж.
Live Editor
Result
Open in CodeSandbox

так же на вид бейджа влияет свойство transparent:

Live Editor
Result
Open in CodeSandbox

Иконка слева / справа​

В левой и/или правой части бейджа можно отобразить иконку:

Live Editor
Result
Open in CodeSandbox