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

Toast

A small charcoal pill that rises from the bottom of the screen, says what happened, and leaves on its own after a few seconds. For reporting an action that just happened.

In codecomponents/toast.tsx

On this page

  1. Live example
  2. Behavior
  3. Rules
  4. Sizes and timing

Live example

There are three types, and only the colored dot differs: error is red, success is green, info is orange. The default is error, because most toasts in the app report something that didn't work.

Live example

Behavior

Toaster is installed once in the root layout; anywhere in the app just calls toast().

Stays3.6sExit 0.35s
Positionbottom · center
Max width100vw − 32px
Regionrole=status · aria-live=polite

Rules

Do

Say only what actually happened: "Invited, but the email wasn't sent."

Don't

A success toast when half the work failed.

Do

Show server errors with tr(data.error || "...").

Don't

Raw technical error text.

Do

For a decision, use a dialog.

Don't

A toast with a button that has to be tapped before it disappears.

import { toast } from "@/components/toast";

toast(tr("ذخیره شد."), "success");
toast(tr(data.error || "ذخیره نشد."));

Sizes and timing

Pillpadding 11px 18px · radius 999px · gap 9px
Text13px / 500 · --dark-contrast on --dark12.94 : 1 · 14.62 : 1
Dot8pxerror --red · success --green · info --accent
Toast spacinggap 8pxStacked in a column
Layerz-index 1300
Join0.4s cubic-bezier(0.16, 1, 0.3, 1)From translateY(28px) scale(0.96)
Exit starts3600ms
Log out0.35s easeTo translateY(18px) scale(0.97)
Removed from the DOM3950ms
  • The container is pointer-events: none and the toast itself is auto; a toast doesn't block clicks on the rest of the page.
  • The role="status" region renders only while there's a toast; some screen readers announce a region that was created together with its text a bit late.
  • A toast has no close button and doesn't stay on hover; that's why it's only for news, not for something that needs to be done.
  • Hidden in print.

Do

Say the type in words too: “Couldn't save.”

Don't

“Failed” with a green dot; the dot and the sentence have to say the same thing.

Do

A short sentence that can be read in 3.6 seconds.

Don't

Two sentences with technical details; it's gone before it's read.

Related pages

Voice and writingOne short, straight sentence.Accessibilityaria-live, and color that isn't the only meaning.MotionEnters from the bottom and exits gently.Radius and shadowToasts sit even above dialogs.
PreviousProgress and stepsNextFloating help

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