Web Components voor Nederlandse Digitale Dienst (Rijksoverheid).
npm install @nldd/design-system// Importeer CSS variabelen en fonts (vereist voor styling)
import '@nldd/design-system/styles';
// Importeer alle componenten
import '@nldd/design-system';
// Of importeer specifieke componenten
import { NLDDButton, NLDDCheckbox, NLDDSwitch } from '@nldd/design-system';<!-- Gebruik in HTML -->
<nldd-button variant="accent-filled" text="Opslaan"></nldd-button>
<nldd-checkbox-field label="Akkoord met voorwaarden"></nldd-checkbox-field>
<nldd-switch-field label="Meldingen inschakelen"></nldd-switch-field>Bekijk de live component documentatie: https://minbzk.github.io/storybook/
# Dependencies installeren
npm install
# Storybook starten
npm run storybook
# Open http://localhost:6006 voor de component documentatie| Attribuut | Type | Default | Beschrijving |
|---|---|---|---|
text |
string | '' |
Tekst van de button |
variant |
string | neutral-tinted |
primary, secondary, destructive, accent-filled, accent-transparent, neutral-tinted, neutral-transparent, critical-tinted, critical-transparent |
size |
string | md |
xs, sm, md |
disabled |
boolean | false |
Uitgeschakelde staat |
type |
string | button |
button, submit, reset |
full-width |
boolean | false |
Rekt de button uit over de volledige breedte van de container |
start-icon |
string | '' |
Icoon aan het begin van de button |
end-icon |
string | '' |
Icoon aan het einde van de button |
expandable |
boolean | false |
Voegt een icoon toe dat aangeeft dat de button een menu of popover opent |
href |
string | undefined |
Rendert als link (<a>) in plaats van een button |
accessible-label |
string | '' |
Toegankelijk label voor schermlezers |
popovertarget |
string | '' |
ID van het popover-element |
Zie de Storybook-documentatie voor alle componenten.
CSS variabelen zijn georganiseerd in vijf lagen:
| Laag | Prefix | Beschrijving |
|---|---|---|
| Primitives | --primitives-* |
Basis waarden (kleuren, spacing, typography) |
| Semantics | --semantics-* |
Betekenisvolle variabelen (buttons, controls, surfaces) |
| Components | --components-* |
Component-specifieke variabelen |
| Context | --context-* |
Gedeelde variabelen voor communicatie tussen componenten |
| Local | --_* |
Interne variabelen binnen een component (niet bedoeld voor extern gebruik) |
/* Primitives — basis waarden */
--primitives-color-accent-100: #154273;
--primitives-space-16: 16px;
/* Semantics — verwijzen naar primitives */
--semantics-buttons-accent-filled-background-color: light-dark(var(--primitives-color-accent-750), var(--primitives-color-accent-650));
--semantics-controls-md-min-size: var(--primitives-space-44);
/* Components — verwijzen naar semantics of primitives */
--components-list-corner-radius: var(--semantics-controls-md-corner-radius);
--components-button-group-sm-gap: var(--primitives-space-6);
/* Context — communicatie tussen componenten */
--context-parent-background-color: var(--semantics-surfaces-background-color);
/* Local — intern binnen een component */
--_background-color: var(--context-parent-background-color);Mis je een component of wil je een wijziging voorstellen? Maak een issue aan.
Het design system gebruikt twee fonts, met verschillende licenties:
- JetBrains Mono (monospace) — vrij te gebruiken onder de SIL Open Font License 1.1.
- Rijksoverheid Sans (
RijksSansWeb) — auteursrechtelijk beschermd door de Staat der Nederlanden. Uitsluitend bedoeld voor publicaties van de Rijksoverheid of partijen die in opdracht van de Rijksoverheid werken. Voor ander gebruik is voorafgaande schriftelijke toestemming vereist; neem contact op met de Rijksvoorlichtingsdienst.
Volledige licentie-informatie staat in NOTICES.md. Door
de fonts mee te leveren in deze repository wordt geen licentie verleend
buiten het hierboven beschreven kader.
De broncode van dit design system valt onder EUPL-1.2. De fontbestanden
in src/assets/fonts/ hebben hun eigen licenties — zie NOTICES.md.