Dew Design System
For writers
UX · Component patterns17 components

How the rules land on components.

The writing principles applied to specific components. Buttons take verbs. Modals take tasks. Toasts take outcomes. These are the per-component rules the dewwrite skill enforces.

ActionsInput & selectionOverlaysFeedbackMetadataNavigationPeople
Actions

TextButton

Actions

Verb-led labels in sentence case, as few words as possible while staying unambiguous.

Write a clear verb phrase

Fewest words possible while staying specific enough that the label makes sense out of context.

Do
  • Save
  • Delete report
  • Add team member
  • Confirm
Don't
  • Click here to save your work
  • Report deletion
  • OK / Yes / Submit form

Sentence case, no '&'

First letter capitalised, rest lowercase. 'And' reads better than the ampersand.

Do
  • Save and close
  • Add to queue
  • Delete and archive
Don't
  • Save And Close
  • ADD TO QUEUE
  • Delete & Archive

IconButton

Actions

No visible label means aria-label carries the whole meaning — write it like a real sentence, not a chrome description.

aria-label describes the action

A concise verb phrase that makes sense when read aloud in isolation.

Do
  • aria-label="Delete comment"
  • aria-label="Edit contact"
  • aria-label="Close panel"
Don't
  • aria-label="icon"
  • aria-label="button"
  • aria-label="X"

Distinguish repeated buttons

When the same icon appears per row, include the item name so screen readers can tell them apart.

Do
  • aria-label="More actions for Invoice #123"
Don't
  • aria-label="More"

HyperlinkButton

Actions

Links describe the destination, not the click. Short (2–5 words) and specific.

Name the destination

Lead with what the reader will see after following the link.

Do
  • View invoice #1042
  • Freshworks documentation
  • Privacy policy
Don't
  • Click here
  • See more
  • Read our privacy policy by clicking this link

'Learn more' only with context

Acceptable when the sentence before it names the topic. Never standalone.

Do
  • Two-factor authentication adds an extra layer of security. Learn more
Don't
  • Learn more

DropdownButton

Actions

The label describes the category of actions — the chevron already signals there's a menu.

Short, noun-based labels

Skip 'Choose' and 'Select'. The menu itself makes the action obvious.

Do
  • Actions
  • Export
  • More options
  • Add
Don't
  • Click to see actions
  • Select an export format
  • Options dropdown

SplitButton

Actions

Primary label names the main action only. Alternatives live in the dropdown with distinguishing text.

Primary = the main verb

The chevron signals variants. The label doesn't need to hint at them.

Do
  • Save
  • Export
  • Delete
  • Send
Don't
  • Save options
  • Export / More
  • Delete (click arrow for more)

Distinguish dropdown options

Each option reads differently from the primary action.

Do
  • Save as draft
  • Save as template
  • Move to trash
  • Export as CSV
Don't
  • Save
  • Template save
  • Trash
  • CSV file
Input & selection

Checkbox

Input & selection

Describe the option or its outcome, not the action of ticking the box.

Label = the option

Do
  • Email notifications
  • Accept terms and conditions
  • Remember me
Don't
  • Turn on email notifications
  • Click to accept
  • Check to remember me

Description adds context without repeating the label

Do
  • Receive updates about your account activity
  • Automatically save changes every 5 minutes
Don't
  • Email notifications: receive email notifications
  • Auto-save: turn on auto-save

RadioGroup

Input & selection

Group label describes what the reader is choosing. Options describe each value — no redundancy with the group.

Group label + distinct options

Do
  • Payment method → Credit card · PayPal · Bank transfer
  • Shipping option → Standard · Express · Overnight
Don't
  • Payment method → Payment method: Credit card
  • Theme → Select theme

Toggle

Input & selection

Label names the resulting state when the toggle is on. Written as a statement, not a command.

Describe the 'on' state

Do
  • Enable notifications
  • Dark mode
  • Auto-save
Don't
  • Turn on notifications
  • Switch theme
  • Toggle auto-save
Overlays

Modal

Overlays

Title states the task or decision. Actions use specific verbs — never 'OK' or 'Yes'.

Title = the task, not a question

Do
  • Delete contact
  • Edit profile
  • Invite team member
  • Confirm subscription upgrade
Don't
  • Are you sure you want to delete this contact?
  • Profile editing
  • Invitation
  • Please confirm your action

Footer actions describe what happens

Primary on right, secondary on left. Each verb matches the outcome.

Do
  • Delete / Cancel
  • Save changes / Discard
  • Invite / Cancel
Don't
  • Yes / No
  • OK / Close
  • Submit / Cancel

SliderPanel

Overlays

Title is a noun phrase describing what the panel holds, not a command.

Name the context

Do
  • Account settings
  • Add contact
  • Filter results
Don't
  • Edit your account settings
  • Adding a new contact
  • Click here to filter

Footer = specific verbs, two actions max

Do
  • Save changes / Cancel
  • Add contact / Discard
  • Apply filters / Clear all
Don't
  • OK / Close
  • Submit / Back
  • Yes / No
Feedback

ToastMessage

Feedback

Short, outcome-focused. Describe what happened. Don't explain how it happened.

Concise past-participle phrases

Do
  • Changes saved
  • Upload complete
  • Connection failed
Don't
  • Your changes have been successfully saved to the database
  • The file upload operation has completed successfully

Title + description doesn't repeat

Do
  • Payment successful · Your payment of $99.00 has been processed.
Don't
  • Payment · Payment successful. Your payment of $99.00 has been processed.

Tooltip

Feedback

One short phrase or sentence. Clarifies the trigger. Never holds must-know info.

One line, plain and helpful

Do
  • Save draft
  • Eastern Standard Time
  • Sync your data with the server
Don't
  • Click to save
  • EST (time zone)
  • Tooltip: Sync

Don't hide essential info here

If the user must see it, put it inline — not behind a hover.

Do
  • Supplement, don't replace, visible copy.
Don't
  • Bury required info in a tooltip only.
Metadata

Tag

Metadata

Short nouns or status words. Close-button labels identify what will be removed.

Concise nouns or phrases

Do
  • Info
  • Success
  • Active
  • Archived
  • Draft
  • High priority
Don't
  • This is an informational tag
  • Click here to see more information
  • Tag

Close label names the thing being removed

Do
  • closeAriaLabel="Remove filter: High priority"
  • closeAriaLabel="Deselect category: Technology"
Don't
  • closeAriaLabel="Close"
  • closeAriaLabel="×"
  • closeAriaLabel="Remove"

Badge

Metadata

Number-only element. The aria-label carries the meaning behind the count.

aria-label describes what's counted

Do
  • aria-label="5 unread messages"
  • aria-label="12 pending approvals"
Don't
  • aria-label="Badge"
  • aria-label="12"
Navigation

Breadcrumb

Navigation

Labels match the destination page heading exactly. Don't paraphrase.

Match the page heading

Do
  • Account Settings
  • Website Redesign
Don't
  • Acct. Settings
  • settings
  • Current project

aria-label on the nav landmark

Do
  • ariaLabel="Breadcrumb"
  • ariaLabel="Fil d'Ariane"
Don't
  • ariaLabel="navigation"
  • ariaLabel="breadcrumb nav"
People

Avatar

People

Describe the person. Never describe the picture as a picture.

Alt text names the person

Do
  • alt="Jane Doe"
  • alt="Profile photo of Jane Doe"
Don't
  • alt="Image"
  • alt="Avatar"

Name fills in when there's no image

When only initials show, the name powers the aria-label. Don't leave it empty.

Do
  • name="Jane Doe"
Don't
  • initials="??"

AvatarGroup

People

The '+N' count speaks for itself. Every avatar still needs a real name.

Don't caption the overflow

Do
  • Let "+N" speak; pair with a tooltip or expandable list
Don't
  • and 3 more avatars

Name every person in the group

Do
  • "Jane Doe" · "Support Team"
Don't
  • "User 1" · "Avatar" · empty alt

Back

For writers

Return to the writing overview.