Component: Action group

[jeffreylauwers]

We willen graag meer leren over het Action group component.

• In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?
• Zijn er specifieke richtlijnen voor positie of volgorde van de acties?

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

Action group

Update: Naam aangepast van 'Button group' naar 'Action group'.
Bekijk de vraag die we stelde over Button group vs. Action group op Slack.

Doel

Groepeert één of meer gerelateerde acties en verzorgt de lay-out van de content.

Gerelateerde componenten

Button, Modal dialog.

Onderzoek

Buttons on the web: placement and order- Medium
Artikel waarin Artem Syzonenko inzichten uit zijn desk research naar de positie en volgorde van acties beschrijft.

Button Ambiguity: Alignment & Order - Medium
Artikel waarin Jon Lehman inzichten uit zijn onderzoek naar de positie en volgorde van acties beschrijft.

Bekijk het Button component voor meer informatie

[jeffreylauwers]

Amsterdam

• Storybook (in modal dialog)
• Figma (als onderdeel van Button component)

---

Screenshots / Varianten

Figma

Button group

In modal dialog

---

Notities

• Variants per viewport.
• Optie voor 'Horizontal' en 'Vertical' uitlijnen.
• Optie voor 2 of 3 acties.
• Horizontal 2 acties van links naar rechts: Tertiary + Primary.
• Horizontal 3 acties van links naar rechts: Tertiary + Secondary + Primary.
• Vertical 2 acties van boven naar beneden: Primary + Tertiary.
• Vertical 3 acties van boven naar beneden: Primary + Secondary + Tertiary.
• De groep wordt binnen een Modal dialog rechts uitgelijnd.

Bekijk het Button component van Amsterdam voor meer informatie

[jeffreylauwers]

Den Haag

• Storybook
• Storybook (in modal dialog)
• Figma - Huidig (als onderdeel van Button component)
• Figma - WIP

---

Screenshots / Varianten

Storybook

Single

Multiple

In modal dialog

Figma - Huidig

Horizontal

Vertical

In modal dialog

Figma - WIP

Vertical - False

Vertical - True

Actions - 2

Actions - 1

---

Notities

Storybook

• Optie voor 1 of 2 acties.
• Acties van links naar rechts: Secondary + Secondary (in Modal dialog Primary + Secondary).
• Button group wordt binnen een Modal dialog rechts uitgelijnd.

Figma - Huidig

• Optie voor 'Horizontal' en 'Vertical' uitlijnen.
• Optie voor 1 of 2 acties.
• Horizontaal 2 acties van links naar rechts: Primary + Secondary of Secondary + Primary.
• Verticaal 2 acties van boven naar beneden: Primary + Secondary.
• Button group wordt binnen een Modal dialog rechts uitgelijnd.
• Komt ook voor in Cookie banner en Task component.

Figma - WIP

• Optie voor 'Horizontal' en 'Vertical' uitlijnen.
• Optie voor 1 of 2 acties.
• Horizontaal 2 acties van links naar rechts: Primary + Secondary.
• Verticaal 2 acties van boven naar beneden: Primary + Secondary.
• Bij verticaal uitlijnen worden de buttons uitgevuld over gehele breedte.
• De groep wordt binnen een Modal dialog links uitgelijnd.
• Komt ook voor in Alert component.

Bekijk het Button component van Den Haag voor meer informatie

[jeffreylauwers]

Rotterdam

• Storybook
• Figma (in modal dialog)

---

Screenshots / Varianten

Storybook

Figma
In modal dialog

---

Notities

Storybook

• Enkel horizontaal uitlijnen.
• 4 acties.
• Van links naar rechts: Primary + Secondary (zwart) + Secondary (groen) + Text button

Figma (in modal dialog)

• Horizontaal en verticaal uitlijnen.
• Horizontaal 2 acties van links naar rechts: Tertiary + Primary.
• Verticaal 2 acties van boven naar beneden: Primary + Tertiary.
• Bij verticaal uitlijnen worden de buttons uitgevuld over gehele breedte.
• De groep wordt binnen een Modal dialog rechts uitgelijnd.

Bekijk het Button component van Rotterdam voor meer informatie

[jeffreylauwers]

RVO

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Full width = true

---

Notities

• In Storybook lijken veel verschillende combinaties mogelijk te zijn. Screenshot is default state.
• Horizontaal 2 acties van links naar rechts: Secondary + Primary.
• Horizontaal justify-content: space-between.
• Verticaal (Full width = true) 2 acties van boven naar beneden: Primary + Secondary.
• Full width = true zorgt logische wijs dat buttons uitgevuld worden over gehele breedte.
• Zie ook 'Verwijderen' en 'Wijzigen' in een table row.

Bekijk het Button component van RVO voor meer informatie

[jeffreylauwers]

Utrecht

• Storybook
• Figma

---

Screenshots / Varianten

Storybook

Default

Direction Column

Figma

Vertical - False

Vertical - True

Actions - 2

Actions - 1

---

Notities

Storybook

• Horizontaal 2 acties van links naar rechts: Primary + Secondary.
• Verticaal 2 acties van boven naar beneden: Primary + Secondary.

Figma

• Optie voor 'Horizontal' en 'Vertical' uitlijnen.
• Optie voor 1 of 2 acties.
• Horizontaal 2 acties van links naar rechts: Primary + Secondary.
• Verticaal 2 acties van boven naar beneden: Primary + Secondary.
• Bij verticaal uitlijnen worden de buttons uitgevuld over gehele breedte.
• De groep wordt binnen een Modal dialog links uitgelijnd.
• Komt ook voor in Alert component.

[jeffreylauwers]

✨ Dit component is nu Help Wanted ✨

Help je mee hem door de Community stappen te krijgen?
Action group op het Community bord