NL Design System
Button #205
Replies: 21 comments 3 replies
-
|
Eerder vroeg ik me al eens af hoeveel type buttons er in gebruik zijn per organisatie. Link naar bericht in Slack |
Beta Was this translation helpful? Give feedback.
-
|
Open Formulieren maakt hier zeker gebruik van: https://open-formulieren.github.io/open-forms-sdk/?path=/docs/pure-react-components-of-button--docs |
Beta Was this translation helpful? Give feedback.
-
AmsterdamScreenshots / VariantenStorybook Primary Secondary Tertiary Notities
|
Beta Was this translation helpful? Give feedback.
-
Den HaagScreenshots / VariantenStorybook Primary Secondary Notities
|
Beta Was this translation helpful? Give feedback.
-
DSO ToolkitScreenshots / VariantenDocumentatie website Primary Secondary Tertiary Notities
|
Beta Was this translation helpful? Give feedback.
-
|
Link documentatie website niet meer actief, wel storybook: https://storybook.dso-toolkit.nl/62.8.4/?path=/docs/html-css-button--docs |
Beta Was this translation helpful? Give feedback.
-
DUOScreenshots / VariantenDocumentatie website Primary Secondary Tertiary Notities
|
Beta Was this translation helpful? Give feedback.
-
Open FormulierenScreenshots / VariantenStorybook Default Primary Secondary Danger Notities
|
Beta Was this translation helpful? Give feedback.
-
OpenGemeentenScreenshots / VariantenDocumentatie website Primary Secondary Open Red Yellow Green Notities
|
Beta Was this translation helpful? Give feedback.
-
RotterdamScreenshots / VariantenFigma Primary Secondary Tertiary Notities
|
Beta Was this translation helpful? Give feedback.
-
RVOScreenshots / VariantenStorybook Primary Secondary Tertiary Quaternary Subtle Warning-subtle Warning Notities
|
Beta Was this translation helpful? Give feedback.
-
UtrechtScreenshots / VariantenStorybook Primary Secondary Button Subtle Notities
|
Beta Was this translation helpful? Give feedback.
-
LOGIUSLUX combines: Screenshots / VariantenPrimary
Secondary
Tertiary
Small Deze variant wordt op sommige plekken toegepast. Er wordt nog gezocht naar de regels wanneer je de smalle variant inzet. Ik zie dit als volgt: de smalle variant wordt bijvoorbeeld ingezet in een tabel om ruimte te besparen. Zodra een designer een button in een tabel sleept zou de button automatisch (via variables/tokens) veranderen naar de smalle variant. Positief/ negatief - van NL doc
Buttons worden ingezet in een waarschuwingsflow:
Destructieve-button NL doc
Destructieve-button GU
Toepassingen:
Select buton van DigiD: Lijkt op de werking van de cijfers van de pagination: En wat doen we met list-items die werken als buttons?
|
Beta Was this translation helpful? Give feedback.
-
✨ Dit component is nu Help Wanted ✨Help je mee hem door de Community stappen te krijgen? |
Beta Was this translation helpful? Give feedback.
-
✨ Dit component is nu Community ✨Help je mee hem door de Candidate stappen te krijgen? |
Beta Was this translation helpful? Give feedback.
-
|
Het lijkt erop dat allee stappen voor |
Beta Was this translation helpful? Give feedback.
-
|
Oh oeps, de link zegt 'Candidate bord', maar je ging nog naar het 'Community' bord. Rozerin heeft het nu aangepast. We hebben dus nog wat werk te doen voordat de Button 'Candidate' is 😅. |
Beta Was this translation helpful? Give feedback.
-
Candidate selectieproces: Is de component al ingesteld voor meerdere huisstijlen?Het kernteam heeft gekeken of de Button van Utrecht al geschikt is om richting Hall of Fame te gaan. Hiervoor willen we dat de component succesvol in tenminste 2 verschillende huisstijlen is ingezet. We hebben (onder andere) gekeken naar de huisstijl van Rotterdam, Open Formulieren, Leiden en RVO en we zijn tot de volgende conclusie gekomen: 🎉 Jazeker! Met jullie hulp hebben we genoeg informatie verzameld om een goed instelbaar component als Candidate beschikbaar te gaan maken. |
Beta Was this translation helpful? Give feedback.
-
Candidate selectieproces: Is de component al meegenomen in een WCAG-EM audit?Om de Button van Gemeente Utrecht als een toegankelijk Candidate component beschikbaar te maken is het handig als we weten of de Community implementaties al helemaal toegankelijk kunnen worden ingezet. We hebben hiervoor gekeken of er een toegankelijkheidsverklaring beschikbaar was voor projecten die in productie worden gebruikt. En: 🎉 Ja! We hebben de uitkomsten van de volgende WCAG-EM audit (1 of meerdere) kunnen vinden: ⦁ Developer Overheid gebruikt het in https://toegankelijkheidsrapport.frameless.io/rapport/developer.overheid.nl-2025-06-26 Notities voor toegankelijkheid📝De bevindingen die we hebben kunnen vinden die betrekking hebben op de Utrecht button, hebben te maken met het toegankelijk inzetten van de component. Zoals: Mis je jullie project en WCAG-audit in deze lijst, maar bevat jullie audit wel waardevolle feedback? Dan horen we dat heel graag! |
Beta Was this translation helpful? Give feedback.
-
Candidate selectieproces: Is de component al ingezet in meerdere projecten?Omdat de Button van Utrecht geschikt is voor verschillende huisstijlen heeft het kernteam ook gekeken of hij al gebruikt wordt in productie, prototypes en templates. We hebben hiervoor in Slack gevraagd wie de Utrecht Button inzet, en diverse projecten en productieomgevingen waar de component succesvol wordt ingezet bekeken. We zijn tot de volgende conclusie gekomen: 🎉 De component wordt onder andere gebruikt door:
Dat betekent dat ook aan dit criterium wordt voldaan! |
Beta Was this translation helpful? Give feedback.
-
Openstaande issues die worden meegenomen voor CandidateWe hebben geen openstaande issues gevonden. Hebben we een issue gemist?Laat het in deze Discussion weten. |
Beta Was this translation helpful? Give feedback.
-
Candidate voorbereidingsfase: Versimpeld of gesplitstDe varianten voor de Candidate component zijn bepaald, dat hebben we gedaan op basis van alle voorbeelden die we in deze Discussion hebben gezien. Als een variant veel voor komt, dan is het een algemeen nuttige variant! Deze varianten nemen we mee:Purpose - enum
Hint - enum
Icon Start - boolean
Icon Start Value (design) Icon End - boolean
Icon End Value (design) State
Disabled - boolean
Pressed - boolean
Deze varianten nemen we niet mee:Size: Small Size 'Small' is vooralsnog geen onderdeel gemaakt van de Candidate. Ondanks dat deze toch wel vaker voor kwam bij community componenten. Het vermoedde bestaat dat deze variant in de praktijk alleen voor in tabellen nodig is. En daarmee zou deze variant van de button eerder een plekje in de Tabel component mogen krijgen. We zijn wel voornemens om een voorbeeld op te nemen in Storybook om te laten zien hoe je de Candidate Button kan 'extenden' en met een extra class 'small' kan maken. Purpose: Tertiary Purpose 'Tertiary' is vooralsnog geen onderdeel gemaakt van de Candidate. Bij onze inventarisatie werd duidelijk dat 'Teriary' en 'Subtle' varianten veelal gelijkwaardige stijling ontvangen. We hebben gekozen voor 'Subtle' in plaats van 'Tertiary' omdat 'Subtle' duidelijker maakt wat het doel is van deze variant. Icon only Variant 'Icon only' is vooralsnog geen onderdeel gemaakt van de Candidate. Ondanks dat deze toch wel vaker voor kwam bij community componenten. Doordat er geen tekst zichtbaar is bij een Icon Only button is deze niet altijd gemakkelijk te activeren door mensen die gebruik maken van spraakbesturing. Daarnaast bestaat het vermoedde bestaat dat deze variant in de praktijk alleen in specifieke gevallen nodig is. Denk daarbij aan de sluit optie van een Modal Dialog of om een zoekactie te activeren bij ruimtegebrek. En daarmee zou deze variant van de button eerder een plekje in de deze specifieke componenten mogen krijgen. Wij horen echter graag of er meer use-cases zijn waar de Icon only variant goed zou werken. Mis je een variant?Laat het ons in deze Discussion weten als er uit gebruikersonderzoek naar voren is gekomen dat deze design beslissing een hele verbetering zou zijn. 💡 Tip |
Beta Was this translation helpful? Give feedback.
-
Candidate voorbereidingsfase: Design tokens bepaaldDe design tokens voor de Candidate component zijn bepaald. Dat hebben we gedaan op basis van alle designs die we in deze Discussion hebben gezien. Deze design tokens nemen we mee:General
Default
Primary
Primary - Negative
Primary - Positive
Secondary
Secondary - Negative
Secondary - Positive
Subtle
Subtle - Positive
Subtle - Negative
Mis je een design token?Laat het in deze Discussion weten als er uit gebruikersonderzoek naar voren is gekomen dat deze design beslissing een hele verbetering zou zijn. 💡 Tip |
Beta Was this translation helpful? Give feedback.
-
Openstaande issues die worden meegenomen voor CandidateWe hebben gekeken bij Amsterdam, Utrecht, Open Formulieren (gebruikt Utrecht), Rotterdam (gebruikt Utrecht) en RVO (gebruikt Utrecht) naar openstaande issues voor Button. We hebben besloten om deze issues wel mee te nemen:
We hebben besloten om deze issues niet mee te nemen:
Deze issues zijn we tegengekomen, die licht gerelateerd zijn aan Button maar niet van toepassing zijn:
|
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
We willen graag meer leren over het Button component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?
Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.
Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!
Link naar bericht in Slack
Naam
Button
Doel
Biedt de mogelijkheid om een actie uit te voeren.
Gerelateerde componenten
Action Group, Login Link
Richtlijnen
Buttons in een formulier - NL Design System
Onze richtlijnen rondom buttons in formulieren.
Onderzoek
Where to put buttons on forms - Adam Silver
Adam Silver legt uit waar buttons moeten worden geplaatst in een reeks verschillende formulieren op basis van onderzoek en best practices.
Disabled buttons suck - Axesslab
Hampus Sethfors beschrijft waarom 'disabled' buttons een slecht idee zijn en wat je beter kunt doen.
Target size - Material design (Youtube)
Onderzoek naar target size uitgevoerd door het team van Material design.
Button design tips - Adham Dannaway
Artikel over de combinatie van verschillende buttons stijlen.
How I build a button - Piccalilli
Artikel waarin Andy Bell stap voor stap uitlegt hoe hij een Button opzet in HTML/CSS.
Button herkenbaar en label duidelijk - NL Design System (Youtube)
Video snippets van een gebruikersonderzoek rondom een meer-stappen-formulier.
Beta Was this translation helpful? Give feedback.
All reactions