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

<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>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 link

examples

import { Badge, BadgeIcon } from "@seduo/design-system";
...
<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

import { Badge, BadgeIcon } from "@seduo/design-system";
...
<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

import { Badge, BadgeIcon } from "@seduo/design-system";
...
<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 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