f-ui
Design

Sentence Case

Use sentence case for in-app titles, labels, and buttons — Title Case is for docs and registry titles only.

Use this page when writing or reviewing in-app text for cards, sections, toolbars, buttons, and alerts. f-ui follows Ant Design Copywriting and Microsoft sentence-style capitalization: sentence case for UI chrome.

Sentence case means capitalize only the first word (plus proper nouns and acronyms) — Shipping label, not Shipping Label. Title Case capitalizes major words — reserved for documentation pages and registry display titles, not app chrome.

Examples

Card Title And Buttons

Left side uses Title Case chrome and CSS uppercase. Right side is what f-ui ships: sentence case titles and buttons, no ALL CAPS section chips.

Wrong

Shipping Label

Title Case chrome + ALL CAPS section title

Right

Shipping label

Sentence case title and buttons — no CSS uppercase

import { Button } from "@/components/ui/button";
import { DesignCompare } from "@/demos/_design/design-compare";

export function SentenceCaseDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-3">
          <h3 className="text-sm font-semibold tracking-wide text-muted-foreground uppercase">
            Shipping Label
          </h3>
          <div className="flex flex-wrap gap-2">
            <Button>Submit For Approval</Button>
            <Button variant="outline">Lock The Period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Title Case chrome + ALL CAPS section title
          </p>
        </div>
      }
      right={
        <div className="space-y-3">
          <h3 className="text-sm font-medium text-muted-foreground">
            Shipping label
          </h3>
          <div className="flex flex-wrap gap-2">
            <Button>Submit for approval</Button>
            <Button variant="outline">Lock the period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Sentence case title and buttons — no CSS uppercase
          </p>
        </div>
      }
    />
  );
}

Sidebar and filter group labels follow the same rule as section titles. Left side shouts with CSS uppercase; right side uses muted sentence case.

Wrong

CSS uppercase nav group chips

Right

Sentence case group labels — no uppercase tracking

import { DesignCompare } from "@/demos/_design/design-compare";

export function SentenceCaseNavGroupDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-3">
          <nav className="space-y-3 rounded-lg border bg-muted/20 p-3">
            <div>
              <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                Catalog
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Orders</li>
                <li>Invoices</li>
              </ul>
            </div>
            <div>
              <p className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
                Settings
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Users</li>
                <li>Preferences</li>
              </ul>
            </div>
          </nav>
          <p className="text-xs text-muted-foreground">
            CSS uppercase nav group chips
          </p>
        </div>
      }
      right={
        <div className="space-y-3">
          <nav className="space-y-3 rounded-lg border bg-muted/20 p-3">
            <div>
              <p className="text-sm font-medium text-muted-foreground">
                Catalog
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Orders</li>
                <li>Invoices</li>
              </ul>
            </div>
            <div>
              <p className="text-sm font-medium text-muted-foreground">
                Settings
              </p>
              <ul className="mt-1.5 space-y-1 text-sm">
                <li>Users</li>
                <li>Preferences</li>
              </ul>
            </div>
          </nav>
          <p className="text-xs text-muted-foreground">
            Sentence case group labels — no uppercase tracking
          </p>
        </div>
      }
    />
  );
}

Button Labels

Button copy is verb-first sentence case — not Title Case. Left side capitalizes every word; right side capitalizes only the first word (plus proper nouns / acronyms).

Wrong

Purchase request

Title Case on every button label

Right

Purchase request

Verb-first sentence case — capitalize first word only

import { Button } from "@/components/ui/button";
import { DesignCompare } from "@/demos/_design/design-compare";

export function SentenceCaseButtonLabelsDemo() {
  return (
    <DesignCompare
      wrong={
        <div className="space-y-3">
          <p className="text-sm font-medium text-muted-foreground">
            Purchase request
          </p>
          <div className="flex flex-wrap gap-2">
            <Button>Create Order</Button>
            <Button variant="outline">Submit For Approval</Button>
            <Button variant="ghost">Lock The Period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Title Case on every button label
          </p>
        </div>
      }
      right={
        <div className="space-y-3">
          <p className="text-sm font-medium text-muted-foreground">
            Purchase request
          </p>
          <div className="flex flex-wrap gap-2">
            <Button>Create order</Button>
            <Button variant="outline">Submit for approval</Button>
            <Button variant="ghost">Lock the period</Button>
          </div>
          <p className="text-xs text-muted-foreground">
            Verb-first sentence case — capitalize first word only
          </p>
        </div>
      }
    />
  );
}

Locked Rule

SurfaceCapitalization
Card / section titles (GroupHeading, region toolbar titles, FormPanel titles)Sentence case — Line items, Shipping label, Extracted fields
Buttons, menus, labels, Alert titles, dialog titlesSentence case — Submit for approval, Create order
Product / brand / trademark namesKeep the official form — Microsoft Word, product full names
AcronymsKeep established form — API, USD, SKU, PO
Status / enum values in tags or tablesDomain spelling — Approved, Pending finance (data, not chrome titles)
Docs MDX front matter / registry display titlesTitle Case — documentation / registry only (not app chrome)
CSS text-transform: uppercase on section titlesForbidden

Do not mix sentence case and Title Case for section titles on the same page (e.g. Line items next to Shipping Label).

More Examples

Wrong (Title Case chrome)Right (sentence case)
Shipping LabelShipping label
Order ContextOrder context
Link LinesLink lines
Submit For ApprovalSubmit for approval
Optional: Lock The PeriodOptional: lock the period

Single-word titles (Invoices, Orders, Period, Validation) look the same in either convention — still treat them as sentence case strings (first letter capital only because they start the title).

Proper Nouns Inside Sentence Case

Keep capitalized proper nouns and role names:

  • Order context (Finance) — Finance is the persona name
  • Synced from Salesforce — product name

Document-type phrases (shipping label, line items) are not trademarks → lowercase after the first word.

Why Not SAP Title Case?

SAP Fiori often uses title case for short labels and headings. f-ui’s interaction north star is Ant Design / Fluent-class enterprise UI, which standardizes on sentence case. Do not flip card titles to Title Case to “match SAP.”

Checklist

  • New GroupHeading / region title is sentence case in source.
  • No CSS uppercase on section titles.
  • Buttons and Alert titles match sentence case.
  • Docs/registry titles remain Title Case (do not “fix” them to match app chrome).
  • Same Object Page does not mix Line items with Shipping Label.

See Also

Field Lock Affordance

How locked fill-in fields show a lock mark and optional reason across forms, Editable Table, and Inline Edit — without looking like system facts or security.

Button And Action Emphasis

Global locked rules for every in-app button — primary vs outline vs ghost, icons vs icon-only, destructive and warning — Ant-backed, mapped to shadcn Button.

On this page

ExamplesCard Title And ButtonsNav Group LabelsButton LabelsLocked RuleMore ExamplesProper Nouns Inside Sentence CaseWhy Not SAP Title Case?ChecklistSee Also