Skip to main content Skip to docs navigation

Badge

Badges are labels which hold small amounts of information.

About Badges

Badges are composed of text inside a <span> <a> or <button> element and may include close icon.

Regular Variants

examples

<Badge>Badge</Badge>
<Badge color="secondary">Badge</Badge>
<Badge color="success">Badge</Badge>
<Badge color="warning">Badge</Badge>
<Badge color="danger">Badge</Badge>
<Badge color="informative">Badge</Badge>
...
<Badge color="salmon-red">Salmon red</Badge>
<Badge color="honey-yellow">Honey yellow</Badge>
<Badge color="lemon-yellow">Lemon yellow</Badge>
<Badge color="lime-green">Lime green</Badge>
<Badge color="mint-green">Mint green</Badge>
<Badge color="aqua-blue">Aqua blue</Badge>
<Badge color="sky-blue">Sky blue</Badge>
<Badge color="lilac-violet">Lilac violet</Badge>
<Badge color="lavender-purple">Lavender purple</Badge>
<Badge color="fuchsia-pink">Fuchsia pink</Badge>
<Badge color="rose-pink">Rose pink</Badge>
<Badge>Badge</Badge>
<Badge color="secondary">Badge</Badge>
<Badge color="success">Badge</Badge>
<Badge color="warning">Badge</Badge>
<Badge color="danger">Badge</Badge>
<Badge color="informative">Badge</Badge>
...
<Badge color="salmon-red">Salmon red</Badge>
<Badge color="honey-yellow">Honey yellow</Badge>
<Badge color="lemon-yellow">Lemon yellow</Badge>
<Badge color="lime-green">Lime green</Badge>
<Badge color="mint-green">Mint green</Badge>
<Badge color="aqua-blue">Aqua blue</Badge>
<Badge color="sky-blue">Sky blue</Badge>
<Badge color="lilac-violet">Lilac violet</Badge>
<Badge color="lavender-purple">Lavender purple</Badge>
<Badge color="fuchsia-pink">Fuchsia pink</Badge>
<Badge color="rose-pink">Rose pink</Badge>

examples

<Badge href="#">Badge link</Badge>
<Badge onClick={() => {}} color="secondary">
  Badge button link
</Badge>
<Badge href="#" color="success">
  Badge link with cross
  <BadgeIcon name="close" />
</Badge>
<Badge href="#" color="warning">
  Badge link
</Badge>
<Badge href="#" color="danger">
  Badge link
</Badge>
<Badge href="#" color="informative">
  Badge link
</Badge>
{% embed "@seduo-design-system/badge.twig" with { props: {
    href: '#'
}} %}
    {% block content %}
        Badge link
    {% endblock %}
{% endembed %}

{% embed "@seduo-design-system/badge.twig" with { props: {
    href: '#',
    target: '_blank'
}} %}
    {% block content %}
        Badge link with custom target
    {% endblock %}
{% endembed %}


{% embed "@seduo-design-system/badge.twig" with { props: {
    tag: 'button',
    color: 'secondary'
}} %}
    {% block content %}
        Badge button
    {% endblock %}
{% endembed %}
<Badge href="#">Badge link</Badge>
<Badge color="secondary" onClick="javascript:void(0);">Badge button link</Badge>
<Badge href="#" color="success">
    Badge link with cross
    <BadgeIcon name="close" />
</Badge>
<Badge href="#" color="warning">Badge link</Badge>
<Badge href="#" color="danger">Badge link</Badge>
<Badge href="#" color="informative">Badge link</Badge>

Badge with Icons

if you want to insert an icon inside the badge, then this is the BadgeIcon component

examples

<Badge>
  <BadgeIcon name="close" />
  Badge icon left
</Badge>
<Badge>
  Badge icon right
  <BadgeIcon name="close" />
</Badge>
<Badge color="secondary" size="small">
  <BadgeIcon name="speaker-low" />
  Badge icon small left
</Badge>
<Badge color="secondary" size="small">
  Badge icon small right
  <BadgeIcon name="long-arrow-right" />
</Badge>
<Badge>
    <BadgeIcon name="close" />
    Badge icon left
</Badge>
<Badge>
    Badge icon right
    <BadgeIcon name="close" />
</Badge>
<Badge color="secondary" size="small">
    <BadgeIcon name="speaker-low" />
    Badge icon small left
</Badge>
<Badge color="secondary" size="small">
    Badge icon small right
    <BadgeIcon name="long-arrow-right" />
</Badge>

BadgeIcon properties

Prop name Type Default Description
name string - its possible to use all icons

Badge sizes

Badges come in two different sizes: small and regular. The regular size is the default and most frequently used option. Use the other sizes sparingly.

examples

<Badge>
  <BadgeIcon name="close" />
  Badge
</Badge>
<Badge size="small">
  <BadgeIcon name="close" />
  Badge small
</Badge>
<Badge size="xsmall">
  <BadgeIcon name="close" />
  Badge xsmall
</Badge>
{% embed "@seduo-design-system/badge.twig" with { props: {
    size: 'small'
}} %}
    {% block content %}
        Badge small
    {% endblock %}
{% endembed %}

<Badge><BadgeIcon name="close" />Badge</Badge>
<Badge size="small"><BadgeIcon name="close" />Badge small</Badge>
<Badge size="xsmall"><BadgeIcon name="close" />Badge xsmall</Badge>

API

Prop name Type Default Description
color Emotion & Action & Theme colors dictionary primary Color of the component
href string - href for link badge
target string _self target for link badge
tag string span Possible change default html tag (a, span, button)
onClick React.MouseEventHandler, string - Execute a JavaScript when a button is clicked
size medium, small, xsmall medium Specifies the badge size
linkComponent (only react) ElementType - the option to change the basic Link component to another
UNSAFE_className string - Wrapper custom classname
UNSAFE_style CSSProperties - Wrapper custom style

On this component it's possible to insert property id, data-* and aria-* properties.

On this page