Skip to content
dev

Component customization

Nopwd components can be customized at a high level. This gives you control over theme colors, general styling and localization.

Styling

using CSS Parts

Nopwd uses standard CSS parts to let you target and styling individual components.

Example to target the empty state:

/* To customize the default state */
np-logout:not([state])::part(button) {
  background-color: black;
  color: white;
}


/* You can also customize every component's state */
np-logout[state="loggingout"]::part(button) {
  background-color: transparent;
  color: grey;
}


np-logout[state="loggedout"]::part(button) {
  background-color: green;
  color: white;
}


np-logout[state="error"]::part(button) {
  background-color: red;
  color: white;
}

using tokens

Localization

Override with ease strings for any element to localize to any language or change the wording to match your brand.

<!-- To override the default slot-->
<np-logout></np-logout>


<!-- to override specific slots-->
<np-logout>
  Logout
  <span slot="loggingout">please wait</span>
  <span slot="loggedout">Bye!</span>
  <span slot="error">Oooooops</span>
</np-logout>