πŸ““

Badge

Meet Castos Sign In 14-Day Free Trial

Who we are

πŸ““What we stand forοΈπŸ““Our PurposeπŸ““Our VisionπŸ““Our MissionπŸ““Our Values

Design System

πŸ““Design PrinciplesπŸ““ColorsπŸ““TypographyπŸ““Images

Content Guide

πŸ““What is a Content GuideπŸ““Writing goals and principlesπŸ““Tips for writing at Castos

Component Library

πŸ““About our ComponentsπŸ““Button

Logos & Assets

πŸ““CastosπŸ““Castos ProductionsπŸ““Castos AcademyπŸ““Audience PodcastπŸ““3 Clips Podcast
⚑
Meet Castos β†’

Β© Castos 2022 – v0.4

Badge

Badges are used throughout the UI to highlight a status notification from the system.

Status

We need to combine the badge class with a status to get the full badge component.

Info

Used for informative feedback.

<span class="badge badge--info">Ready</span>

Warning

Used to warn about an issue that requires attention.

<span class="badge badge--warn">Incomplete</span>

Success

Used when an action is successfully completed.

<span class="badge badge--success">Imported</span>

Danger

Used to indicate that there was a problem.

<span class="badge badge--danger">Failed</span>
  • Badge
  • Status
  • Info
  • Warning
  • Success
  • Danger