Add className support to internal typography in Button (EDS 2.0)

[StianIsmar]

Is your feature request related to a problem? Please describe.

Yes. In components such as Button, we currently lack the ability to reliably target internal typography or styling through a className.
Because of this, any style customization (e.g., color, font size, etc.) must be done using fragile CSS selectors like .eds-button > p, which is not safe or maintainable.

Describe the solution you’d like

We would like support for passing a className to the internal typography element (e.g., TypographyNext) used within the Button component.
This would allow consumers to apply style overrides in a predictable and maintainable way, without relying on brittle DOM-structure selectors.

Describe alternatives you’ve considered

The current workaround is to target nested elements using CSS selectors based on DOM structure.
However, this approach is fragile, can easily break with internal refactoring, and does not provide a stable styling contract for consumers.

Additional context

Having classNames in the the components would help us a lot, not only in the button, but if this could be something for all the components.

[pomfrida]

Thanks for the detailed write-up @StianIsmar!

I've had a look at how this relates to the current EDS 2.0 patterns.

What's happening today:
Button wraps text children in a <TypographyNext as="span">, but there's no way to pass a className to that internal span. The only way to target it is through .eds-button > span, which is exactly the kind of fragile selector we want to avoid.

Current patterns in EDS 2.0:
We don't have a slot-based className API (like classNames={{ root, label }}) in any next component today. What we do have:

• Single className on root (most components)
• containerClassName as a separate prop (Input)
• Compound components where sub-parts accept their own className (Field.Label, Field.Description, etc.)

Before deciding on an approach, it would help to understand the use case better:

• What specific styles are you overriding on the internal typography? (color, font-size, font-weight, etc.)
• Is this mainly about Button, or are there other components where you're hitting the same issue?
• Could you share an example of the kind of override you need?

Depending on the answer, there are a few possible directions — ranging from exposing CSS custom properties (no API change needed) to adding a dedicated prop. Would be great to narrow it down before we commit to an approach.

[StianIsmar]

Thanks for the answer. This is probably more of a general request, since we target css like this. The component library we have been using until this point has had classnames on the children.

I have added some examples:

<Drawer
  css={{
    ".opt-drawer__header": {
      height: "100px",
    },
  }}

<Popover
  tooltipRef={tooltipRef}
  placement="right-start"
  padding="0px"
  display="flex"
  justifyContent="space-between"
  css={{
    display: "flex",
    justifyContent: "space-between",
    ".opt-popover__content": {
      padding: 0,
    },
  }}

<Box
  height="100%"
  justifyContent="center"
  display="flex"
  overflow={isMobileOrTablet ? "auto" : "hidden"}
  css={{
    "& > div": {
      alignItems: "center",
      backgroundColor: colors.grey10,
    },
    ".opt-tabs__panel": {
      height: "calc(100% - 64px)",
      width: "calc(100% - 32px)",
      backgroundColor: "white",
      marginBottom: "16px",
      overflow: "auto",
    },
    ".opt-tabs__indicator--horizontal": {
      justifyContent: "center",
    },
    ".opt-tabs--horizontal": {
      width: "auto",
    },
  }}
>

<Slider
  display="flex"
  alignItems="center"
  width="100%"
  onChange={handleSliderChange}
  marks={sliderMarks}
  tooltipPlacement="bottom"
  tooltipFormatter={sliderTooltipFormatter}
  value={[selectedSliderDates[0].index, selectedSliderDates[1].index]}
  min={0}
  max={numberOfDaysBetweenProjectStartAndEnd}
  css={{
    // move the left slider handle a litte bit down
    ".opt-slider__handle[id$=opt-slider__handle--1]": {
      marginTop: 0,
    },
    // move the right slider handle a litte bit down
    ".opt-slider__handle[id$=opt-slider__handle--0]": {
      marginTop: 0,
    },
    ".opt-slider__rail": {
      backgroundColor: pallette.secondary?.highlight,
    },
  }}
/>

Image from the library with classnames:

[pomfrida]

Thanks for the examples @StianIsmar — that helped clarify the need. 🙌

I've added stable BEM classes to the internal elements of Button and TextField:

• Button: .eds-button__label on the text wrapper (replaces the fragile .eds-button > span selector)
• TextField: .eds-text-field on the root element (as the BEM block for the existing .eds-text-field__header and .eds-text-field__info)

See PR: #4638

These classes are meant as stable hooks for CSS targeting, similar to the .opt- prefixes you're used to from your previous component library.

The other next components (Input, Field, Icon, etc.) already have internal BEM classes in place. If you find any components that are missing classes, just let us know and we'll add them. But we will definitely be more aware of the need for this going forward 👌