Badges

Badges are either subtle or bold and use color to indicate meanings that users can learn and recognize across products.

Code

Brand Pill

Toggle dark mode

Certara UI

packages/certara-ui/src/components/badge/badge.tsx

<certara-badge variant="brand">Brand</certara-badge>
<certara-badge type="pill">Pill</certara-badge>

certara-badge

Properties

Property	Attribute	Description	Type	Default
type	type		"badge" | "circle" | "pill"	'badge'
variant	variant		"brand" | "critical" | "cyan" | "danger" | "info" | "magenta" | "neutral" | "olive" | "orange" | "periwinkle" | "success" | "warning"	'brand'

Dependencies

Used by

• certara-tab-item

Graph

graph TD;
  certara-tab-item --> certara-badge
  style certara-badge fill:#f9f,stroke:#333,stroke-width:4px

---

HTML

<span class="badge badge--brand">Brand</span>
<span class="badge badge--brand badge--pill">Pill</span>

ColorsClassAction

1. Brand
   .badge—brand
   badge--brandCopy to Clipboard
2. Neutral
   .badge—neutral
   badge--neutralCopy to Clipboard
3. Success
   .badge—success
   badge--successCopy to Clipboard
4. Warning
   .badge—warning
   badge--warningCopy to Clipboard
5. Information
   .badge—info
   badge--infoCopy to Clipboard
6. Danger
   .badge—danger
   badge--dangerCopy to Clipboard
7. Critical
   .badge—critical.badge—pill
   badge--critical badge--pillCopy to Clipboard
8. Magenta accent
   .badge—magenta
   badge--magentaCopy to Clipboard
9. Orange accent
   .badge—orange
   badge--orangeCopy to Clipboard
10. Olive accent
    .badge—olive
    badge--oliveCopy to Clipboard
11. Cyan accent
    .badge—cyan
    badge--cyanCopy to Clipboard
12. Periwinkle accent
    .badge—periwinkle
    badge--periwinkleCopy to Clipboard

Twirl

app/views/components/badge.scala.html

@badge(style="", classes="", id=""){…body}

NameTypeDescriptionDefault valueCopy

1. style
   string
   style of badge
   brand
   class=""Copy to Clipboard
2. id
   string

   adds an id to the .badge

   blank
   id = ""Copy to Clipboard
3. classes
   string

   adds CSS classes to the .badge

   blank
   classes = ""Copy to Clipboard
4. {body}
   html
   the text of the badge. Can be a simple string or a computed value.
   blank
   n/a

Twirl usage with jQuery (or vanilla javascript)
Output the badge component in a template literal.

app/views/Accounts/users.scala.html

$td.append(`@badge(style="dark", classes="ml-2"){@Messages("Role Request")}`);

Animation effect

Missing for FDA

Toggle dark mode

<certara-badge variant="danger" class="is-pulsing-border-5x-danger">
  Missing for FDA
</certara-badge>

In Practice

Selecting the badge’s shape and color

• Use pills to display only counts.
• Use critical badges sparingly and reserve them to display only counts like unread notification or unresolved issues.

Accessibility

• Text must be clear enough for color blind users to be able to understand immediately without needing to rely only on the color.
• Avoid using badges for longer text. Badges are not focusable, so the text truncated after 200 (or the custom maxWidth value) pixels will not be accessible.

Figma

View component in Figma