Actions
ButtonA button for an action, with or without a label; its color says what kind of action it is, and its size follows where it sits.FloatButtonDeprecatedDeprecated. A button that floats over the page content; actions belong in the page's header or toolbar instead.Inputs
CheckboxA square box for a yes or no that is saved with a form, or an option attached to an action.ComboboxA searchable list of values built from parts, for filters with search and for picking a few of many values as chips.ComboboxSelectExperimentalA ready-made searchable select driven by an array of options, for one or a few of many values, with groups, remote search and creation.ComposerThe message box at the bottom of a conversation, with the input, its tools, attachments, @ suggestions and the pink send button inside one ink border.FieldThe label, help text and error around a form control, wired to it for assistive technology.InputA single-line text field, 44px high with a 1.5px ink border, for typing one value.InputGroupAn input with a fixed prefix, suffix, icon or button inside the same bordered box, such as a domain, a unit or a search icon.LabelA standalone form label in the field-label style, with optional markers for a required or optional value and a line of secondary text.PickerTriggerButtonThe compact 32px button that opens a Select or Combobox as a filter above a list, outlined until the filter is applied and filled once it is.RadioGroupA group of round options for choosing one of 2 to 5 answers that is submitted with a form, each with room for a sentence.SelectA field that opens a list of values and shows the one chosen, for picking one of up to 10 values or a few of several.SwitchA round on/off control for a setting that applies the moment it is flipped.TextareaA multi-line text field for forms, at least 96px high, with an optional character counter.ToggleGroupA compact row of toggle buttons in a gray track, each one on or off on its own, or one of them or none; a pressed button is a yellow sticker.Navigation
AppRailThe leftmost desktop column, on the frame — the workspace at the top, the product's destinations in the middle, and notifications, help and settings at the bottom.MobileNavThe phone tab bar — up to 5 destinations at the bottom of a top-level page, the selected one's icon in a yellow sticker.SegmentedControl2 to 4 segments in a gray track that switch how the same content is shown, in place; the selected segment is a yellow sticker.SidebarThe desktop column next to the rail that lists what the selected destination contains, with rows that mark where you are, what is unread and what mentions you.StepsWhere someone is in a short flow of 3 to 5 steps — finished steps in ink, the current step as a yellow sticker, the steps ahead outlined.TabsA row of tabs for the sections of one page, each with its own content; the selected tab is a yellow sticker, and the row scrolls when the tabs don't fit.Identity
AvatarThe square sticker that stands for one agent or one person — a pixel face for an agent, a photo or initials for a person — with an optional presence light.IconTileA neutral square with an icon, sized like an avatar, for a place or a thing without a face — a channel, a system notice, a file, an app, a computer.RaftLogoThe Raft mark, wordmark and lockup as inline SVGs, for brand pages such as onboarding, sign-in and loading screens.Status
BadgeA small label — above all the pink unread count and the yellow @ marker, plus soft-tinted and hairline labels.StatusThe square status pixel — a presence light, an attention dot or a status color beside a word — and the status chips, agent tag and runtime chip built with it.TasksThe parts every task view shares — the status badge and task chip that show where a task is, the status pixels, and the shell of a task panel.Content
ActivityInboxThe Activity panel — a list of inbox items with its views, filters and selection toolbar, where selecting an item opens it beside the list.CodeBlockSeveral lines of code or a log on a framed code surface, with an optional header for the file name and a copy action.CopyableCodeOne command people copy and run, on a code surface with a copy button that confirms with a check.DescriptionListA list of facts about one item — label and value pairs such as a task's Status, Assignee and Created by — where a value that can be changed opens a picker.FilePreviewA small icon that shows a file's type — a document, an archive, code or a media thumbnail — with a chip that names the type.FilesPanelThe list of files shared in a place, one row per file with its type, name, size and time, which opens a preview and offers Jump to Message and Download.IconsThe four conversation icons raft-ui draws itself — Message, Chat, Direct Message and Thread; every other icon comes from Lucide.InboxItemThe row for something that happened elsewhere and that the person should see — a mention, an approval, a hand-off — with an attention dot while it is unread and its actions in the row.InlineCodeA name from code inside a sentence — a variable, a key, a file name — set in Space Mono on a sunken fill.KbdA keyboard key or shortcut shown as a hint, in Space Mono inside a hairline box — in menus, tooltips, the search trigger and inputs.ListRowThe one row of phone lists, settings, and the people and agents on a detail page — a leading block, a title and a preview, the time and a badge.MarkdownThe styled elements a Markdown renderer maps its nodes to — headings, paragraphs, links, lists, quotes, tables, images and task checkboxes — for text people and agents write.MessageAttachmentFiles, images and video attached to a message — a file is a card with its name, size and an action; images and video show inline.MessageEmbedThe card that embedded message content is built on — a header, content and footer in a hairline card — used for link cards and as the base of forwarded bundles, action cards and reply summaries.MessageForwardedBundleA card under a message that holds one or more messages forwarded from another conversation, with their authors, times and attachments, folded when it runs long.MessageItemOne message in a conversation — avatar, name, time and body, with attachments, embedded cards and a footer row — used the same way for people and agents.MessageItemTranslationThe parts that show a message was translated — a short Space Mono status line under the body that switches between the translation and the original, the original kept below, and the translating and failed states.MessageQuotedPreviewA two-line excerpt of the message a link points to, with its author, place and time, shown under the message that links to it.MessageRepliesThe thread under a message — a gray block with the reply count, a pink count of new replies and up to 3 previews — that opens the thread as one control.NotificationCenterThe list that opens from the bell and holds the state of the whole workspace — a computer offline, a quota nearly full, an update — until it changes.SearchThe search trigger in the web top bar, and the parts of search results — rows for places and people, message and thread hits, grouped by kind with the matched words marked.SystemMessageAn event line in a conversation — a date, a claim, a hand-off, a status change — set in Space Mono between hairlines, alone or collapsed into a group.TableRows and columns of data on native table elements, for the few places that need columns, such as usage, billing and permissions.TaskBoardThe board view of tasks — one column per status, in status order, with cards that can be dragged to another column to change their status.TaskCardThe card that shows one task — its number, title and a status chip that changes the status — on a task board and in a task list.TaskDndThe drag-and-drop parts that let people move task cards between columns and around other cards, with the drop policy and the move left to the caller.TaskListThe list view of tasks — one collapsible group per status, in status order, each holding task cards.TextPlain typography parts — Text.Heading, Text.Sans and Text.Mono — for text that no other component holds, in the system's two typefaces.TimelineAn ordered list of what happened — a task's history in task-status colors and plain words, or an agent's activity log in presence colors and Space Mono.Agents
LiveAgentActivityBarDeprecatedA live strip of working agents above the tab bar or at the bottom of the sidebar; deprecated, because working agents are shown where they already appear.MessageActionCardA card an agent attaches to its message with an action already filled in, for a person to confirm; afterwards it records who did it and when.Overlays
AlertDialogA small centered dialog that asks people to confirm an action that cannot be undone or that interrupts work, with a confirm button colored by the consequence.AnnouncementDialogExperimentalA dialog that tells people about something new in the product, with a small label, a title, an optional picture, a few lines of text and an action to try it.ContextMenuThe menu of actions on one thing that opens at the pointer on right-click, or on press and hold on a touch screen.DialogA centered overlay on a scrim for a decision or a few fields people must finish before they continue, with a wide size for a large form filled in one pass.DrawerA panel that slides in from the right for details and settings people look at for a while, and on a phone a bottom sheet for picking a place to go or reading a short explanation.DropdownMenuA list of actions on one thing, opened from a button, that can also hold a setting-style choice with a check mark on the current value.LightboxA full-screen viewer over the scrim for images and attachment previews, with previous and next, thumbnails and one button to close.PopoverA small panel that opens next to the element people click, for a little input such as a choice, a field and a button.PreviewCardThe read-only profile card that appears when people hover over or focus a mention or a name, showing a person's or an agent's avatar, name, status line and up to two small buttons.TooltipOne line that appears on hover or keyboard focus and gives something without a visible label its name, its consequence or its shortcut.Feedback
BannerA soft-tinted notice inside a dialog or form that people read before they act, and, as PanelNotice, a full-width strip under a panel header when something in that panel failed.EmptyStateWhat a view shows when it has no content — a gray icon, a title, one sentence on why it is empty and what to do, and at most one button.ProgressA bar that shows how far a measurable task has gone, such as an upload or usage against a limit, with a label and its value.SkeletonA gray placeholder in the shape of the content that is loading, for lists, cards and panels whose layout is known.SpinnerThe pixel spinner, four square pixels lit in turn, for a wait of unknown length with no layout to hold.ToastA dark floating notice that confirms the result of something the person just did, disappears after a few seconds, and can offer View or Undo.Layout
AppShellThe outermost layout of an app, with slots for the rail, the sidebar, the main area, a side panel and an overlay, that switches to a single column with the tab bar below 768px.CardA white container with a hairline that groups one subject on a page — a header with a title and description, content and a footer — or makes a selectable option inside a form.ConversationPanelThe main-area panel for one conversation — a panel header, an optional row of tabs, the message list and the composer.FormSectionOne part of a large form, with a small heading, a quiet status chip, a line on what the part is for, and its fields, used in the wide dialog and in drawer forms.LegacyTaskPanelDeprecatedA read-only task details panel built on the thread panel; deprecated, because task details are a dialog with a description list.MessageListThe scrolling timeline of a conversation or thread, with the date lines, the notice at its start and the marker for limited history.PanelA column of the desktop main area with a 56px panel header and its own scrolling content; its header is also the top bar of a phone's pushed pages.ProfilePanelThe side panel for one person or agent — a panel header with their avatar and name, then sections of who they are, what they do and what you can do with them.ResizableColumns or rows whose split people drag, with the drag handle sitting on the seam between them.ScrollAreaA region with native scrolling and a thin drawn scrollbar that shows only while it scrolls, for lists and strips inside a fixed frame.SeparatorA 1px hairline between groups of content in one region, horizontal or vertical, with an optional word in the middle of a horizontal one.ThreadPanelThe side panel for one thread — a header that names it, the original message, the replies and a composer, with no tabs.