NewsKit Mobile Logo

Component Defaults

Each component in NewsKit gets its default theme tokens from the theme itself. By not hardcoding tokens in the components, this means you can override the default tokens used by any component via the theme. For example, you could change the padding preset used by all Button components, or the typography preset used by all Byline components. Each component documents the structure of its component defaults on their respective documentation page.

As part of the component defaults functionality, there is a consistent overrides prop on all components. This prop takes an object which mirrors the structure of the component defaults. You can use this to override individual tokens in that specific instance of the component.

Part of the functionality of the defaults and overrides system allows you to override presets at specific breakpoints. For example you could set a different typography presets at different breakpoints, so you can make the text larger on bigger devices. This is done by passing an object - comprising of breakpoint keys and token values to the override. Such as:

typographyPreset: {
  xs: 'editorialHeading010',
  md: 'editorialHeading010',
  lg: 'editorialHeading010',
}

Properties which support this will be documented as using the generic MQ type, i.e. MQ<string>. This means you can pass a single string token to be used at all times, or a combination at breakpoints like above.

Overriding at theme level

Overriding at the theme level involves creating a theme with your changes under the overrides property, similar to how you would change other areas of the theme. Here is an example of overriding the component defaults for the medium size Button component, changing the default typography and style presets. Some components, like the button, will have variants in their component defaults such as size.

You can override as many or as little component defaults as you wish. Each component documentation page details the component defaults it uses.

Overriding at component level

You can also override at an individual component level, where the overrides will only apply to that specific instance of the component. The example below shows overriding the Button styles the same as above.

Note that the variant (in this case, "medium") is not included in the overrides. Variants are not specified in the component overrides prop, only the theme. Some components which are built using multiple components may have a nested structure to their component defaults.

The Byline for example, shown above, is a case of this nested approach. This allows you to specify the overrides for the nested components as well as the top level.