Badge

Примеры​

Размер badge​

Размер задается с помощью свойства size.

Возможные значения свойства: l, m, s, xs.

Live Editor
Result
Open in CodeSandbox

Скругленность badge​

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

Live Editor
Result
Open in CodeSandbox

Вид badge​

Вид badge задается с помощью свойства view. Вариант отображения задаётся с помощью свойства appearance.

Возможные значения view: "default", "accent", "positive", "warning", "negative", "black", "white", "dark", "light".

Возможные значения свойства appearance: "default", "clear", "transparent".

Устаревшие значения view

Значения "dark" и "light" устарели. Используйте "black" и "white" вместо них соответственно.

Устаревшие свойства

Свойства transparent и clear устарели. Используйте appearance="transparent" и appearance="clear" соответственно.

Live Editor
Result
Open in CodeSandbox

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

В левой или правой части badge можно отобразить иконку. Если же нужен Badge с иконкой без текста, нужно использовать contentLeft.

Live Editor
Result
Open in CodeSandbox

Задание цвета текста и фона​

Цвет текста и фона можно задать с помощью свойств customColor и customBackgroundColor соответственно.

Live Editor
Result
Open in CodeSandbox

Градиентный текст​

Текст бейджа можно окрасить в градиентный цвет с помощью класса sdds-core-text-node:

Live Editor
Result
Open in CodeSandbox