Overrides

Change the theme for one part of the page, or for one kind of component.

Appearance sets the theme for the whole app. An override changes it inside one element.

Change one part of the page

Put a data attribute on any element. Everything inside that element uses the setting:

// components/compact-panel.tsx
import type { ReactNode } from 'react';

export function CompactPanel({ children }: { children: ReactNode }) {
  return (
    <section data-density="compact" data-radius="round">
      {children}
    </section>
  );
}

The other fields apply to the whole app.

Round only the buttons

Set --nx-radius-base on a wrapper. Buttons read that variable, while inputs and select triggers read --nx-radius-md, so they keep their corners:

// components/rounded-actions.tsx
import type { CSSProperties } from 'react';

import { Button } from '@/components/nxds/components/button/button';
import { Input } from '@/components/nxds/components/input/input';
import {
  Select,
  SelectTrigger,
  SelectValue,
} from '@/components/nxds/components/select/select';

type RadiusStyle = CSSProperties & { '--nx-radius-base': string };
const pillButtons: RadiusStyle = { '--nx-radius-base': '9999px' };

export function RoundedActions() {
  return (
    <div data-radius="round" style={pillButtons}>
      <Button>Save changes</Button>
      <Input aria-label="Name" />
      <Select>
        <SelectTrigger aria-label="Category">
          <SelectValue placeholder="Choose a category" />
        </SelectTrigger>
      </Select>
    </div>
  );
}

The buttons become pills. The input and the select trigger keep the round value's 12px.

To change one button, put style={pillButtons} on that button instead.

RadiusStyle adds the custom property to the style type, so you don't need to change React's global types.

Which variable each component reads

--nx-radius-base isn't reserved for Button. Anything inside the wrapper that uses nx:rounded-base picks up the override.

A component that sets its own radius, such as Carousel's arrows, keeps it. For the rest, check the component source.

Nested wrappers

When data-radius and an inline --nx-radius-base style are on the same element, the inline value wins.

Overrides follow the DOM tree. A popover or menu that renders in a portal sits outside your wrapper, so it doesn't get the override.

Button groups

ButtonGroup squares off the edges where buttons touch. With an override, only the outer corners are rounded. In a group that mixes Buttons with an Input or ButtonGroupText, the two ends can have different corners.