Skip to main content
Flowra
PricingCommunityFAQ
JoinStart with Flowra
  • PricingPlans, seats and payment
  • Frequently asked questionsEverything you have asked, in one place
  • Contact usWrite to the right team
  • CommunityKaro Studio, who make Flowra

For your team

  • Marketing teamsCampaigns from brief to launch
  • Product and dev teamsFeatures and bugs with full context
  • Design and content teamsBrief, files and delivery side by side
  • Operations teamsWork, documents and costs you can track
  • Sales and services teamsFrom meeting to contract and payment
  • Remote teamsOnline meeting to delivery, on your time

For your role

  • Project managersAction stories instead of chasing the team
  • Freelancers and consultantsFrom brief to contract and settlement

For your workflow

  • Meeting to actionMeeting decisions as trackable work
  • Actions with financial contextCosts next to the work that caused them
  • Actions with contract contextEvery commitment as trackable work
  • Brief to project deliveryEvery project step, one complete action
See all solutionsStart with FlowraJoin
++
Flowra design system

Fundamentals

PrinciplesVoice and writingCopy rules for each surfaceGlossaryRTL and languagesNumbers and datesAccessibility

Foundations

ColorDark modePrintingTypographySpacing and layoutRadius and shadowLayersMotionNotification soundKeyboard shortcutsIconsService logos

Components

ButtonsText fieldPickerDate and timeCheckboxRadioKeySegmented controlSliderMenu and sheetDialogCard and listTables and data listsBadge, pill, and switchTabs and filtersAvatarEmpty and loading statesProgress and stepsToastFloating helpNavigationPage headerAssistants

Patterns

Connector pageList, filter, and searchForm layoutCreation flowUpgrade promptConfirmation and irreversible actionsPhone layoutFixed bars and scrolling

Brand

Flowra brandMark and logoBrand colorBrand typographyMisuse

Design system/Components

Badge, pill, and switch

A badge labels something, a pill is a control that selects, and a switch turns something on and off. They look alike, but they do different jobs.

In codeapp/globals.css (.pill, .badge-soft, .badge-accent, .badge-count, .toggle)

On this page

  1. Badges
  2. Pills
  3. Sizes
  4. Rules
  5. Size at each breakpoint
  6. States
  7. Contrast and accessibility

Badges

badge-soft is a quiet label: "Soon", file type, status. badge-accent is for something that must be seen, like "New". badge-count is the unread counter, red and round, and shows only when the number isn't zero.

Live example
SoonPDFNew312
Chat4KnowledgeNew

Pills

A pill is a control, not a heading: filter bars and view switchers are built from it. It's 30px tall, the same height as btn-sm, so a bar of pills next to buttons reads as one family. The active pill turns charcoal.

Live example
Email reminder
Weekly summary

Why

Pills used to be 22px, the smallest thing in the row and the hardest to tap. A control that looks like a label doesn't get tapped.

Sizes

.pillmin-height 30px · 12.5px / 500Touch inside main: 42px
.badge-soft2px 8px · 10.5px / 600 · r 6
.badge-accent2px 7px · 10px / 700 · r 6
.badge-count19px · 10.5px / 700 · pill
.toggle36 × 21pxHandle 16px, spring 0.28s

Rules

Do

Badges for labels, pills for choices.

Don't

A tappable badge; no one knows it can be tapped.

Do

A switch for a setting that applies immediately.

Don't

A switch in a form with a Save button; a checkbox or a picker is better.

<span className="badge-soft">{tr("به‌زودی")}</span>
<button className={`pill ${on ? "pill-active" : ""}`} onClick={toggle}>{tr("امروز")}</button>
<button className="toggle" data-on={enabled} onClick={flip} aria-pressed={enabled} />

Size at each breakpoint

.pill desktopmin-height 30px · padding 5px 12px · gap 5px
.pill phonemin-height 34px · padding 8px 14px · 13.5px
.pill touch inside mainmin-height 42pxOnly button and a
.pill inside a phone .modalmin-height 40px · 13.5px
.badge-soft phonepadding 3px 9px · 11.5px
.badge-accent phonepadding 3px 8px · 11px
.toggle touch46 × 27px · handle 21px::before inset -12px -8px

States

Pill: hovertranslateY(-1px)Only .pill:is(button)
Pill: pressscale(0.94)
Pill: active.pill-active · --dark-contrast on --dark
Switch: ondata-on="true" · --accent · translateX(15px)Touch 19px
Switch: pressHandle 16 → 20pxOn: translateX(11px)
Switch: focus2px solid var(--accent) · offset 2px
Switch: disabledopacity 0.45 · not-allowed
Switch: trackbackground 0.2s ease

Contrast and accessibility

Pill and badge-soft text4.64 : 1 · 5.33 : 1--text-secondary on --muted; AA
Active pill12.94 : 1 · 14.62 : 1AAA
badge-accent5.19 : 1 · 5.19 : 1#fff on --accent-strong; 10px/700; AA
badge-count5.14 : 1 · 5.54 : 1#fff on --red-strong; AA
Switch off1.37 : 1 · 1.46 : 1Track on card; white knob with a shadow
  • Badges are short, bold text whose meaning is in the word, not just the color; the text of every badge, badge-soft included, now meets AA in both themes.
  • .toggle is a <button>; state its state with aria-pressed (or role="switch" and aria-checked), because data-on tells a screen reader nothing.
  • The switch doesn't mirror in right-to-left: on means the knob is on the right, in both directions.
  • On touch screens, the switch's touch area is enlarged by an invisible ::before, 12px above and below and 8px on each side: about 62 by 51px.

Related pages

Tabs and filtersPill bars for filters, tab bars for views.List, filter, and searchFilter pills above a list.ColorSoft backgrounds and text.ButtonsPills match the height of btn-sm.AssistantsThe assistant's starter suggestions are pills.Connector pageThe "Soon" badge on a connector card.
PreviousTables and data listsNextTabs and filters

Related pages

  • PageBrand kitThe Flowra mark and logo, colors, typography, clear space and minimum size, and the brand kit files to download.
  • PageDocumentationThe complete Flowra guide: actions, calendar, meetings, knowledge, files, Folio, chat, network, finance, connectors, settings and AI, each with its connections.
  • PageChangelogWhat each release added to Flowra, what got better, and what’s coming next.
  • PageContact usReach the right team: support, sales and plans, partnerships, careers, or security and privacy.
Flowra

Flowra is an all-in-one workspace for managing tasks, projects, finances, meetings, and teamwork, powered by AI to keep everything organized in one place.

Solutions for teams

  • Marketing teams
  • Product and dev teams
  • Design and content teams
  • Operations teams
  • Sales and services teams
  • Remote teams

Roles and flows

  • Project managers
  • Freelancers and consultants
  • Meeting to action
  • Actions with financial context
  • Actions with contract context
  • Brief to project delivery

With Flowra

  • All solutions
  • Pricing
  • Frequently asked questions
  • Documentation
  • Contact us
  • Brand kit
  • Design system
Crafted by Karo Studio
SecurityPrivacyTermsCookies
Version 0.16.0