From f027f1eaf1ceb5b82ba1de21bc3c5147e18bf73b Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Wed, 26 Aug 2026 17:07:13 +0200 Subject: [PATCH 1/2] chore(ui): update ux writing guidelines re modal confirming action button labels Signed-off-by: Franz Heidl --- docs/ux/ux-writing-content-design.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/docs/ux/ux-writing-content-design.md b/docs/ux/ux-writing-content-design.md index 7247e216f7..cce4c5f9fa 100644 --- a/docs/ux/ux-writing-content-design.md +++ b/docs/ux/ux-writing-content-design.md @@ -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.” + +### 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 From 9723b1f54a988556581dcb9583e3de708a09e5d5 Mon Sep 17 00:00:00 2001 From: Franz Heidl Date: Thu, 27 Aug 2026 10:38:24 +0200 Subject: [PATCH 2/2] chore(ui): change case of confirming button labes in stories Signed-off-by: Franz Heidl --- .../ui-components/src/components/Modal/Modal.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/src/components/Modal/Modal.stories.tsx b/packages/ui-components/src/components/Modal/Modal.stories.tsx index 1d3d879160..ff4cf25fe4 100644 --- a/packages/ui-components/src/components/Modal/Modal.stories.tsx +++ b/packages/ui-components/src/components/Modal/Modal.stories.tsx @@ -319,7 +319,7 @@ export const DefaultWithForm: Story = { title: "Default Modal Form", initialFocus: "#firstname", cancelButtonLabel: "Cancel", - confirmButtonLabel: "Register now", + confirmButtonLabel: "Register Now", children: , }, } @@ -338,7 +338,7 @@ export const LargeWithForm: Story = { title: "Large Modal Form", initialFocus: "#firstname", cancelButtonLabel: "Cancel", - confirmButtonLabel: "Register now", + confirmButtonLabel: "Register Now", children: , }, } @@ -357,7 +357,7 @@ export const XLWithForm: Story = { title: "XL With Form", initialFocus: "#firstname", cancelButtonLabel: "Cancel", - confirmButtonLabel: "Register now", + confirmButtonLabel: "Register Now", children: , }, } @@ -376,7 +376,7 @@ export const XXLWithForm: Story = { title: "2XL With Form", initialFocus: "#firstname", cancelButtonLabel: "Cancel", - confirmButtonLabel: "Register now", + confirmButtonLabel: "Register Now", children: , }, }