Skip to content

chore(ui): ux docs modal action button labels #1925

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
franzheidl merged 2 commits into from
Aug 27, 2026
+22 −5
Merged

chore(ui): ux docs modal action button labels #1925

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f027f1e
chore(ui): update ux writing guidelines re modal confirming action bu…
franzheidl Aug 26, 2026
9723b1f
chore(ui): change case of confirming button labes in stories
franzheidl Aug 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 18 additions & 1 deletion docs/ux/ux-writing-content-design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,24 @@ You may use an ellipsis to indicate another step will be needed to complete an a

When referring to a button label in copy, use quotation marks and the exact case as in the label:

"Click "Terminate Instance" to proceed."
“Click “Terminate Instance” to proceed.”
Comment thread
franzheidl marked this conversation as resolved.

### Confirming Buttons in Modals

For the primary confirming button in a Modal, prefer appending the object type to the verb when the object type is a single, short word: “Delete Image” communicates intent more clearly than a bare “Delete”. If the object type is more than one word or has an unusually high number of syllables, fall back to the verb alone.

Application authors have some flexibility in applying this, but must be consistent within their application — do not use “Delete Image” in one Modal and “Delete” in another for the same type of action.

#### Do

- “Delete Image”
- “Revoke Key”
- “Stop Instance”

#### Fall Back to the Verb Alone

- “Delete” (not “Delete Kubernetes Node Pool”)
- “Stop” (not “Stop Hyperscaler Infrastructure”)

## Use “Sign in” over “Log in”, and Be Consistent

Expand Down
8 changes: 4 additions & 4 deletions packages/ui-components/src/components/Modal/Modal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -319,7 +319,7 @@ export const DefaultWithForm: Story = {
title: "Default Modal Form",
initialFocus: "#firstname",
cancelButtonLabel: "Cancel",
confirmButtonLabel: "Register now",
confirmButtonLabel: "Register Now",
children: <ReusableForm />,
},
}
Expand All @@ -338,7 +338,7 @@ export const LargeWithForm: Story = {
title: "Large Modal Form",
initialFocus: "#firstname",
cancelButtonLabel: "Cancel",
confirmButtonLabel: "Register now",
confirmButtonLabel: "Register Now",
children: <ReusableForm />,
},
}
Expand All @@ -357,7 +357,7 @@ export const XLWithForm: Story = {
title: "XL With Form",
initialFocus: "#firstname",
cancelButtonLabel: "Cancel",
confirmButtonLabel: "Register now",
confirmButtonLabel: "Register Now",
children: <ReusableForm />,
},
}
Expand All @@ -376,7 +376,7 @@ export const XXLWithForm: Story = {
title: "2XL With Form",
initialFocus: "#firstname",
cancelButtonLabel: "Cancel",
confirmButtonLabel: "Register now",
confirmButtonLabel: "Register Now",
children: <ReusableForm />,
},
}
Expand Down
Loading