Skip to content
dev

Component Customization

Nopwd components can be customized extensively. This allows you to control theme colors, general styling, and localization.

Styling

Using CSS Parts

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

Example to target the empty state:

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


/* Customize each component 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

Easily override strings for any element to localize to any language or change the wording to match your brand.

<!-- Override the default slot -->
<np-logout></np-logout>


<!-- Override specific slots -->
<np-logout>
  Logout
  <span slot="loggingout">Please wait</span>
  <span slot="loggedout">Bye!</span>
  <span slot="error">Oops!</span>
</np-logout>