Button guidance PR #4409

alina-jacob · 2024-12-13T16:41:38Z

Closes:
#4397: Belongs to button component guidance umbrella
#4176: Belongs to danger icon-only button guidance umbrella

Important links:
Figma file

Context

Added button guidance as a part of the consolidation effort from PAL to Core.
Updated content of Usage and Style Tab to better accommodate guidance and follow the current templates.
[Note: No content change has been done for the Button groups section.]

vercel · 2024-12-13T16:41:44Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
carbondesignsystem	❌ Failed (Inspect)			Dec 19, 2024 7:01pm

aagonzales

~~I need to finish reviewing but don't want to lose my comments so far.~~ Update: I'm done reviewing. Its looking good though! Most of my comments are little things or on sections that were probably out of scope for your work but wanted to leave comments anyways.

aagonzales · 2024-12-20T16:20:13Z

src/pages/components/button/usage.mdx

@@ -84,13 +104,13 @@ communicate calls to action to the user and allow users to interact with pages
 in a variety of ways. Button labels express what action will occur when the user
 interacts with it.

-#### When to use
+### When to use


I know it's probably not consistent with other pages but I liked these as H4s more. Their hierarchy is just clearer since they're such short sections (just an opinion here).

aagonzales · 2024-12-20T16:41:43Z

src/pages/components/button/usage.mdx

+A button’s label is the most important element on a button, as it communicates
+the action that will be performed when the user interacts with it. In a button
+the label is always left-aligned, not center-aligned. By default Carbon uses
+sentence case for all button labels.


I thought this section could use some rephrasing. Here's my suggestion (its also fine to keep as is).

A button’s label communicates the action that is performed when the user interacts with it. In an icon button, that has no label, the icon must accurately represent what the button does. In a Carbon button, the label is always left-aligned, not center-aligned. The icons in a button with a label is right-aligned but in an icon button, the icon is centered.

I would also recommend the sentence about sentence casing down to the content section instead.

aagonzales · 2024-12-20T16:45:32Z

src/pages/components/button/usage.mdx

+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| Small              | Use when vertical space is limited or in areas with a confined layout.                                                                          |
+| Medium             | Use when buttons are paired with 40px medium sized input fields.                                                                                |
+| Large (productive) | This is the most common button size. Use 14px body copy.                                                                                        |


aagonzales · 2024-12-20T16:45:53Z

src/pages/components/button/usage.mdx

+| Small              | Use when vertical space is limited or in areas with a confined layout.                                                                          |
+| Medium             | Use when buttons are paired with 40px medium sized input fields.                                                                                |
+| Large (productive) | This is the most common button size. Use 14px body copy.                                                                                        |
+| Large (expressive) | The larger expressive type size within this button provides balance when used with 16px body copy. Used by the IBM.com team in website banners. |


Suggested change

| Large (expressive) | The larger expressive type size within this button provides balance when used with 16px body copy. Used by the IBM.com team in website banners. |

| Large (expressive) | The larger expressive type size within this button provides balance when paired with 16px body copy. Used by the IBM.com team in website banners. |

aagonzales · 2024-12-20T16:49:08Z

src/pages/components/button/usage.mdx

+| Large (productive) | This is the most common button size. Use 14px body copy.                                                                                        |
+| Large (expressive) | The larger expressive type size within this button provides balance when used with 16px body copy. Used by the IBM.com team in website banners. |
+| Extra large        | Use when buttons bleed to the edge of a larger component, like in the context of modals, side panel and narrow tearsheets.                      |
+| 2XL                | Use when buttons bleed to the edge of a larger component, like in the context of large tearsheets.                                              |


Both XL and 2XL say "edge of larger components..." can we differentiate here a little more?

Suggested change

| 2XL | Use when buttons bleed to the edge of a larger component, like in the context of large tearsheets. |

| 2XL | Use when buttons bleed to the edge of a full-screen component, like in the context of large tearsheets. |

aagonzales · 2024-12-20T17:07:10Z

src/pages/components/button/usage.mdx

-buttons that call the `$button-separator` token for borders. This feature adds a
-3:1 distinction between the two interactive UI elements. The border is a
-recommended feature to improve accessibility.
+There is [a 1px border](/components/button/style#ghost-button-structure.mdx)


Is this link correct? Its going to ghost button structure.

Instead of doing the inline link, maybe do the "See the style tab for details" type of thing at the end of the paragraph.

aagonzales · 2024-12-20T17:12:04Z

src/pages/components/button/usage.mdx


  </DoDont>
 </DoDontRow>

+#### Internationalization (RTL)
+
+For RTL (right-to-left) languages, the entire button is mirrored horizontally.


Suggested change

For RTL (right-to-left) languages, the entire button is mirrored horizontally.

For right-to-left (RTL) languages, the entire button is mirrored horizontally.

aagonzales · 2024-12-20T17:16:42Z

src/pages/components/button/usage.mdx

+### States
+
+The default and interactive states of buttons should follow the
+button [Style](/components/button/style#color.mdx) tab guidelines.


Suggested change

button [Style](/components/button/style#color.mdx) tab guidelines.

button [Style](/components/button/style#color) tab guidelines.

aagonzales · 2024-12-20T17:20:52Z

src/pages/components/button/images/button_usage_ub_interaction.png

The overlay of this button looks off. Maybe try it with the multiply effect.

aagonzales · 2024-12-20T17:22:44Z

src/pages/components/button/usage.mdx

-[accessibility tab](/components/button/accessibility).
+[Accessibility](/components/button/accessibility) tab.
+
+### Validation


IMO I think we could cut this section since its basically a don't. It could be confusing to user.

aagonzales

Ok, finished, awesome work @alina-jacob! Just smalls things. The style tab looked perfect, no notes there.

aagonzales · 2024-12-20T20:27:08Z

src/pages/components/button/usage.mdx

+action. [Button groups](#button-groups) contain more guidance on how to use
+secondary buttons.


Rephrase to fit our standard "See more" formatting

Suggested change

action. [Button groups](#button-groups) contain more guidance on how to use

secondary buttons.

action. See [Button groups](#button-groups) for more guidance on how to use

secondary buttons.

aagonzales · 2024-12-20T20:30:46Z

src/pages/components/button/usage.mdx

+
+#### Tertiary buttons in button groups
+
+In [Button groups](#button-groups), where there is one primary and two other


I think since this isn't directly reference the "Button group" heading it can just be lower case.

Suggested change

In [Button groups](#button-groups), where there is one primary and two other

In [button groups](#button-groups), where there is one primary and two other

aagonzales · 2024-12-20T20:40:14Z

src/pages/components/button/usage.mdx

- Glyphs should always appear to the right of the text
+  buttons.
+- Glyphs are distinguished by their solid shape and knocked-out details.
+- Glyphs should always appear to the right of the text.


Why are we saying "Glyphs" here in all these bullet points, isn't this the rule for icons?

aagonzales · 2024-12-20T20:42:50Z

src/pages/components/button/usage.mdx

+Do you think a universal action with a clearly defined icon is missing? Let us
+know [here](https://github.com/carbon-design-system/carbon/issues/new/choose).
+
+Icons that are not in this list can be used in buttons, as long as the icon


I think we should move the sentence up with the other content above the table. These three paragraphs just feel very choppy here.

aagonzales · 2024-12-20T20:47:11Z

src/pages/components/button/usage.mdx

+are often found in the UI left navigation area, side panel, cards, and modals.
+The target destination of the launch action should be made clear to the user
+through the button or link label and the surrounding context. For more guidance,
+see [this section](https://pages.github.ibm.com/carbon/ibm-products/guidelines/content/navigation-labels/) 


For this link, can we be more specific instead of saying "this section"? It also link to an internal site so we need to put "For IBMers only:" at the beginning of the section

aagonzales · 2024-12-20T20:49:30Z

src/pages/components/button/usage.mdx

+  would launch a new page.
+</Caption>
+
+### Best practices


Is this a general "best practices"? Or best practices of icons in buttons? I'm not sure "Best practices should be an H3 under "Modifiers"

aagonzales · 2024-12-20T20:52:31Z

src/pages/components/button/usage.mdx

+Icon only buttons should be used sparingly. “For most situations, users learn
+correct interpretations better with text alone than with icons alone.” —
+Wiedenbeck, S (1999). For this reason, using icon-only buttons is recommended
+for the following use cases.


Suggested change

for the following use cases.

for the following use cases:

button_pr

390274a

alina-jacob self-assigned this Dec 13, 2024

alina-jacob added this to the 2024 Q4 milestone Dec 13, 2024

alina-jacob mentioned this pull request Dec 13, 2024

Button guidance ✈️ #4146

Open

1 task

vercel bot had a problem deploying to Preview December 13, 2024 16:45 Failure

chore: yarn format

7fecafe

vercel bot had a problem deploying to Preview December 13, 2024 18:06 Failure

fix: update icon to StopOutline

a66a661

vercel bot had a problem deploying to Preview December 13, 2024 18:16 Failure

chore: encode characters

df020bc

vercel bot had a problem deploying to Preview December 13, 2024 19:12 Failure

tay1orjones mentioned this pull request Dec 17, 2024

Update IconButtonKinds carbon-design-system/carbon#18251

Closed

alina-jacob-ibm and others added 2 commits December 19, 2024 22:29

update_1

a93f016

Merge branch 'main' into button_pr

6505681

alina-jacob marked this pull request as ready for review December 19, 2024 17:01

alina-jacob requested review from a team as code owners December 19, 2024 17:01

alina-jacob requested review from kennylam, emyarod and laurenmrice December 19, 2024 17:01

alina-jacob added the status: ready for review 👀 label Dec 19, 2024

alina-jacob requested a review from aagonzales December 19, 2024 17:01

vercel bot deployed to Preview December 19, 2024 17:09 View deployment

chore:format

6ad3f5f

vercel bot deployed to Preview December 19, 2024 19:01 View deployment

aagonzales reviewed Dec 20, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Button guidance PR #4409

Button guidance PR #4409

alina-jacob commented Dec 13, 2024 •

edited

Loading

vercel bot commented Dec 13, 2024 •

edited

Loading

aagonzales left a comment •

edited

Loading

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales left a comment

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

aagonzales Dec 20, 2024

	\| Large (productive) \| This is the most common button size. Use 14px body copy. \|
	\| Large (productive) \| This is the most common button size in software products. Pairs with 14px body copy. \|

	\| Large (expressive) \| The larger expressive type size within this button provides balance when used with 16px body copy. Used by the IBM.com team in website banners. \|
	\| Large (expressive) \| The larger expressive type size within this button provides balance when paired with 16px body copy. Used by the IBM.com team in website banners. \|

	\| 2XL \| Use when buttons bleed to the edge of a larger component, like in the context of large tearsheets. \|
	\| 2XL \| Use when buttons bleed to the edge of a full-screen component, like in the context of large tearsheets. \|

	For RTL (right-to-left) languages, the entire button is mirrored horizontally.
	For right-to-left (RTL) languages, the entire button is mirrored horizontally.

	button [Style](/components/button/style#color.mdx) tab guidelines.
	button [Style](/components/button/style#color) tab guidelines.

		action. [Button groups](#button-groups) contain more guidance on how to use
		secondary buttons.


		#### Tertiary buttons in button groups

		In [Button groups](#button-groups), where there is one primary and two other

Button guidance PR #4409

Are you sure you want to change the base?

Button guidance PR #4409

Conversation

alina-jacob commented Dec 13, 2024 • edited Loading

Context

vercel bot commented Dec 13, 2024 • edited Loading

aagonzales left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aagonzales left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alina-jacob commented Dec 13, 2024 •

edited

Loading

vercel bot commented Dec 13, 2024 •

edited

Loading

aagonzales left a comment •

edited

Loading