Shape Badge

Indicate the status or importance of a process or an element on reduced spaces.

Shape badge 1

Maturity

Beta

FYQ2 target

Alpha

Figma component

Repository

Storybook

Overview

Badges provide supplemental information about the status or importance of a parent element. They aren’t interactive, so they don’t have any associated interaction states. But their parent element can be.

Shape Badges allow us to do it in places where the space is compromised, like in Figures.

Related components


How to use

Sentiment

Semantic colors are intended to draw attention to essential experience elements and, through specific sentiments, assign them a particular meaning that facilitates their differentiation.

More details


#0568fd
Awake
Interactive, Active, and working as intended
When to use
  1. Signify an interactive element.
  2. Something is active and working as intended
Purpose
Encourage action or indicate progress.
Example
  1. "This is what you can do"
  2. "Everything is on track"
  3. "Live"
#6c718c
Dormant
Inactive, asleep, or suspended ⚠️ Use sparingly on text
When to use
Something’s not available or locked.
Purpose
State something’s unavailable and inform why (when needed/possible).
Example
  1. "We want to let you know that this is unavailable."
  2. "Disabled"
  3. "Pro" (only available in the Pro plan)
#cc3f4d
Critical
A critical or unexpected situation
When to use
  1. Something’s not working and requires immediate action because of its importance and severity; regardless if it’s a person’s error or a system error.
  2. A problem happened, or a person made a mistake that prevented them from finishing their task or a process.
  3. Indicate actions that are destructive and can’t be undone—they require confirmation.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
  1. "We’ve got a problem, and we need to act now."
#ac5f00
Warning
Cautionary advice about a potential problem
When to use
Informs about/indicates an action that can be taken to prevent errors or unwanted things from happening.
Purpose
Clearly state what’s going on and provide an actionable solution.
Example
  1. "We’re letting you know about a potential problem."
  2. "Unverified"
#15807b
Success
Achievement of a goal
When to use
When things are done or went accordingly to plan.
Purpose
Inform about success.
Example
  1. "This is done; everything went well."
  2. "Enabled"
#6b5bee
Featured
Highlighted for special attention, neither good nor bad
When to use
Provides valuable information to people about something important or out of the ordinary, essential to understand the context and making a decision.
Purpose
Neutrally inform people.
Example
  1. "We’re letting you know about…"
  2. "New"
  3. "Beta"
  4. "AI"

Size

Shape Badges come in three sizes:

  1. Small (SM6px) for Dense layouts.
  2. Medium (MD8px) as the default size.
  3. Large (LG12px) when it complements bigger component, such as the LG Figure.

Crop Border

Crop border

Crop Border prevents the Badge from blending with its parent element. It's False by default.


Quality checklist

This component passes the following requirements described in our Component lifecycle.

Maturity

Beta

α · Design tokens

It uses Ariane design tokens.

α · Official assets

It uses the official Ariane assets (e.g., icons and illustrations) in one of the official sizes.

α · Accessible use of color

Its color contrast ratio is at least 4.5:1 for text and interactive areas.

α · Target areas

Its interactive target areas are large enough for users to accurately select them, following the Fitts law.

α · Naming agreement

Its name is agreed upon and shared between design and development.

α · Responsive L1

Is responsive to different viewport sizes.

α · User-triggered states

If the component is interactive, all its possible user-triggered interactive states are defined.

β · Responsive L2

The responsive behavior has been reviewed and validated by the team.

β · State properties

All the possible state attributes are defined.

β · Docs L1

It has essential documentation with at least primary usage.

β · Use cases

All the uses are audited and refined.

RC · Definition agreement

Its naming and properties are audited and aligned in design and code.

RC · Accessible L1

Its accessibility is manually audited, and any significant issues are fixed.

RC · Docs L2

The documentation covers the most common use cases and is expected to be iterated during the Release Candidate phase.

RC · Storybook

Includes a Storybook playground of the component.

Stable · Stable API

The component and its API remain stable, with no breaking changes for at least one month.

Stable · Adaptive

Supports adaptive design via preference queries.

Stable · Docs L3

Detailed documentation exists for design, content, accessibility, and implementation, including do’s and dont’s.

Stable · Tooling

Tooling (such as linters, codemods, etc.) exists to help with migrations and prevent further use of alternatives.