https://framer.com/m/Badge-nZ5e7j.js#Badge

_ __ _ (_)___ ____/ /__ _____(_)___ _____ / / __ \ / __ / _ \/ ___/ / __ `/ __ \ / / /_/ / / /_/ / __(__ ) / /_/ / / / / /_/\____/ \__,_/\___/____/_/\__, /_/ /_/ /____/ __ _______ _______/ /____ ____ ___ / ___/ / / / ___/ __/ _ \/ __ `__ \ (__ ) /_/ (__ ) /_/ __/ / / / / / /____/\__, /____/\__/\___/_/ /_/ /_/ /____/

Hello, Design System
你好，设计系统
こんにちは、デザインシステム
안녕하세요, 디자인 시스템
Hola, Sistema de Diseño
Bonjour, Design System
Hallo, Designsystem
Olá, Sistema de Design
Привет, дизайн-система
مرحبًا، نظام التصميم

UI Text

io

The System

UI Basics

Enhancements

Io / UI Basics / Badge

Badge

Badge renders a row of tags from one comma-separated string. Use it for categories, metadata and status labels — one instance covers the whole group rather than one instance per tag.

Content8 type steps5 weights3 alignments

Examples

Live specimens for every control the component exposes.

Default

Labels are a single comma-separated string. Each entry becomes one tag, sharing the instance’s appearance.

DesignSystemFramer

Labels

One instance renders the whole group, so a metadata row is one layer on the canvas, not five.

Interactive

one label

ContentFormLayout

three labels

8 type steps5 weights3 alignmentshoverlinks

five labels

Type scale

fontSize picks a step from the theme type scale, so badges stay in step with surrounding text.

Tiny

Detail

Callout

Body

Weight

weight maps to the theme font-weight tokens.

regular

medium

semibold

bold

Shape and padding

radius, paddingX and paddingY are plain numbers, so a badge can read as a chip, a pill or a square tag.

Square

radius 4

Rounded

radius 8

Pill

radius 100

Colour

background, text and border take theme tokens. The accent tint is the default for page metadata rows.

Accent

accent tint

Neutral

neutral

Outlined

outlined

Alignment

align positions the group inside a container wider than the tags themselves.

OneTwo

align left

OneTwo

align center

OneTwo

align right

Props

The controls exposed on the instance panel.

Prop	Type	Behaviour
itemsJSON	string	JSON array for dynamic or linked tags, e.g. [{“label”:“Docs”,“href”:“…”}].
labels	string	Comma-separated tag list. The simplest way to fill a badge group.
tags	array	Static tag list set from the property panel, with an optional href per tag.
align	enum	left · center · right. Positions the group in its container.
gap	number	Space between tags in pixels.
paddingX	number	Horizontal padding inside each tag.
paddingY	number	Vertical padding inside each tag.
radius	number	Corner radius per tag. 100 gives a pill.
background	color	Tag fill. Use Theme/theme-a100 for accent metadata rows.
hover	color	Fill on hover.
text	color	Tag label colour.
hover1	color	Label colour on hover.
border	boolean	Draws a 1px outline instead of relying on fill alone.
width	number	Border width when border is on.
color	color	Border colour.
hover2	color	Border colour on hover.
innerStroke	color	Optional inner stroke for extra definition.
fontSize	enum	Theme type step, from H1 down to Tiny.
weight	enum	light · regular · medium · semibold · bold.
transition	transition	Easing used when a tag moves to its hover colours.

Prop	Type	Behaviour
itemsJSON	string	JSON array for dynamic or linked tags, e.g. [{“label”:“Docs”,“href”:“…”}].
labels	string	Comma-separated tag list. The simplest way to fill a badge group.
tags	array	Static tag list set from the property panel, with an optional href per tag.
align	enum	left · center · right. Positions the group in its container.
gap	number	Space between tags in pixels.
paddingX	number	Horizontal padding inside each tag.
paddingY	number	Vertical padding inside each tag.
radius	number	Corner radius per tag. 100 gives a pill.
background	color	Tag fill. Use Theme/theme-a100 for accent metadata rows.
hover	color	Fill on hover.
text	color	Tag label colour.
hover1	color	Label colour on hover.
border	boolean	Draws a 1px outline instead of relying on fill alone.
width	number	Border width when border is on.
color	color	Border colour.
hover2	color	Border colour on hover.
innerStroke	color	Optional inner stroke for extra definition.
fontSize	enum	Theme type step, from H1 down to Tiny.
weight	enum	light · regular · medium · semibold · bold.
transition	transition	Easing used when a tag moves to its hover colours.

Usage

Guidance carried over from the component definition.

Reach for Badge

A row of categories, tags or metadata needs one consistent treatment.

Some tags should link out while the rest stay static.

The group must respond to hover with its own colours.

Tag appearance should track the theme type scale.

Reach for something else

The tag needs interaction beyond hover and links.

End users create or edit tags inline — use TagPicker.

A single status pill is really a button — use Button.

Io — UI Basics

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.