Icon-only button

Summary

I’d like to propose that icon-only buttons become a use-case of the Button component. This UX pattern is currently used by other components (overflow menu, data table, tooltip) but having it be part of Button will allow for more consistent [re-]use within applications.

Currently I’ve only seen this used with the ghost and primary variants by our design guidelines for compact UIs but we don’t limit which variant could be used. With Carbon 9 it didn’t create an issue but the Carbon X’s extra padding/min-width creates an odd visual style.

Relevant information

Examples from Watson Health

By default icon-only buttons are not very accessible for cognitive disabilities, so Watson Health has added a textual description when the button is hovered/focus for users to get more information about what the button does. See demo here: https://pages.github.ibm.com/Watson-Health/components/preview/button--icon-only.html

Screen shots from our design guidelines Different variants Different sizes

Slack conversation in carbon-components

Liz Judd: Does Carbon provide Icon only button code? When I use the Carbon X button styles, it looks odd with the space to the left of the icon

Josh Black: AFAIK we don’t provide an icon button

Liz Judd: Is that something that’s being considered? Should I make an issue for it or keep it custom to our setup

Josh Black: It’s not on any roadmap for components, I believe. Might be worth bringing up to see if this is a UX pattern that is supported or not

Liz Judd: It’s used by overflow menu and the toolbar for data tables which is why I’m surprised that it’s not something that’s available. I’ll create an issue to start the conversation

Josh Black: I think the style for those aren’t coming from the underlying button component though, right? Which is why they might be distinct stylistically

Liz Judd: I just mean that it’s a practice that is used by other components so why it wouldn’t be offered stand-alone seems odd so consumers could use them in other locations other than those specific components

Alessandra Davila What is your use case for a icon button. I think overflow menu work differently than how a button works

Liz Judd Compact UIs

Liz Judd We deal a lot with big data and can have very overwhelming layouts so the use of icon-only buttons help clean up the space

Josh Black I believe Cloud would have a similar use-case for compactness, right? Particularly around data density.

Liz Judd It’s also used by tooltip and data table so it’s not just a one off for overflow menu

Josh Black I think we need to distinguish between an icon used in a button semantically and a button icon styled by the primary button styles, right?

Josh Black We definitely use the former in widgets 👍 The latter is what I thought we were referring to here but let me know if I’m wrong

Liz Judd i don’t know if i understand what you mean by a icon used in a button and button icon. They should all be in button elements as they perform an action

Josh Black An icon used in a button: <button><svg>...</svg></button> A button icon: <button class="bx--btn">...</button> Is all I meant

Josh Black Right, but it seemed like you were asking about a button styled like the button components

Liz Judd oh yes, we primarily use the ghost button variant. we don’t technically limit our users though and they could use any button variant

Josh Black Right, we should sync on if that’s consistent UX behavior then. In cloud I believe that pattern isn’t used which is why this isn’t currently supported, most likely.

Liz Judd I’ll create a discussion issue vs feature request

[asudoh]

As far as I see, icon is used for its intuitiveness and its simplicity. Some design systems prefers icons over text, while some doesn’t. OTOH @dakahn has a good point with his reference that icon sometimes cause confusions - I guess more traffic signs in the US are in text than ones in Japan from that reason, which is, multi-cultural nature of the US tends to have multiple perceptions of a single icon.

That said, I see this topic is a designers’ choice. That’s why input from our designers is important here, as @joshblack solicited for earlier. A response from our designer can be found at: https://github.com/IBM/carbon-components/issues/1667#issuecomment-458273025

[asudoh]

Closing for the sake of #1667, don’t hesitate to speak up if anybody thinks this ticket should be separate - Thanks!