pi-design-deck 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/README.md +49 -11
  2. package/deck-schema.ts +30 -0
  3. package/deck-server.ts +64 -10
  4. package/export-html.ts +329 -0
  5. package/form/css/controls.css +51 -0
  6. package/form/deck.html +2 -0
  7. package/form/js/deck-core.js +46 -0
  8. package/form/js/deck-interact.js +30 -12
  9. package/form/js/deck-render.js +2 -0
  10. package/form/js/deck-session.js +25 -9
  11. package/generate-prompts.ts +8 -10
  12. package/index.ts +317 -41
  13. package/package.json +2 -1
  14. package/prompts/deck-discover.md +3 -1
  15. package/prompts/deck-plan.md +3 -1
  16. package/prompts/deck.md +3 -1
  17. package/skills/design-deck/SKILL.md +44 -8
  18. package/skills/design-deck/references/component-gallery/INDEX.md +88 -0
  19. package/skills/design-deck/references/component-gallery/LOOKUP.md +592 -0
  20. package/skills/design-deck/references/component-gallery/components/INDEX.md +106 -0
  21. package/skills/design-deck/references/component-gallery/components/actions.md +354 -0
  22. package/skills/design-deck/references/component-gallery/components/data-display.md +812 -0
  23. package/skills/design-deck/references/component-gallery/components/feedback.md +513 -0
  24. package/skills/design-deck/references/component-gallery/components/inputs.md +921 -0
  25. package/skills/design-deck/references/component-gallery/components/layout.md +167 -0
  26. package/skills/design-deck/references/component-gallery/components/navigation.md +350 -0
  27. package/skills/design-deck/references/component-gallery/components/overlays.md +208 -0
  28. package/skills/design-deck/references/component-gallery/components/utilities.md +29 -0
  29. package/skills/design-deck/references/component-gallery/components.md +1383 -0
package/skills/design-deck/references/component-gallery/components/INDEX.md ADDED
@@ -0,0 +1,106 @@
1
+ # Component Gallery Reference
2
+
3
+ Visual vocabulary for UI component generation. 2676 real-world examples from 60 components across 100+ design systems.
4
+
5
+ **Source:** [component.gallery](https://component.gallery) by [Iain Bean](https://iainbean.com)
6
+
7
+ ## Categories
8
+
9
+ - **[Actions](actions.md)** (294 examples) — Components that trigger operations or navigate to other resources.
10
+ - **[Navigation](navigation.md)** (281 examples) — Components for moving between pages or sections.
11
+ - **[Inputs](inputs.md)** (726 examples) — Form controls for data entry.
12
+ - **[Data Display](data-display.md)** (663 examples) — Components for presenting content and information.
13
+ - **[Feedback](feedback.md)** (420 examples) — Components that communicate status, progress, or system messages.
14
+ - **[Overlays](overlays.md)** (170 examples) — Components that appear above the main content layer.
15
+ - **[Layout](layout.md)** (111 examples) — Components for structuring and organizing page content.
16
+ - **[Utilities](utilities.md)** (11 examples) — Accessibility and helper components.
17
+
18
+ ## Components by Category
19
+
20
+ ### Actions
21
+
22
+ - [Button](actions.md#button) (118)
23
+ - [Button group](actions.md#button-group) (36)
24
+ - [Dropdown menu](actions.md#dropdown-menu) (48)
25
+ - [Link](actions.md#link) (64)
26
+ - [Segmented control](actions.md#segmented-control) (28)
27
+
28
+ ### Navigation
29
+
30
+ - [Breadcrumbs](navigation.md#breadcrumbs) (55)
31
+ - [Navigation](navigation.md#navigation) (63)
32
+ - [Pagination](navigation.md#pagination) (49)
33
+ - [Skip link](navigation.md#skip-link) (14)
34
+ - [Stepper](navigation.md#stepper) (19)
35
+ - [Tabs](navigation.md#tabs) (81)
36
+
37
+ ### Inputs
38
+
39
+ - [Checkbox](inputs.md#checkbox) (84)
40
+ - [Color picker](inputs.md#color-picker) (16)
41
+ - [Combobox](inputs.md#combobox) (37)
42
+ - [Date input](inputs.md#date-input) (17)
43
+ - [Datepicker](inputs.md#datepicker) (43)
44
+ - [Fieldset](inputs.md#fieldset) (31)
45
+ - [File](inputs.md#file) (6)
46
+ - [File upload](inputs.md#file-upload) (32)
47
+ - [Form](inputs.md#form) (22)
48
+ - [Label](inputs.md#label) (15)
49
+ - [Radio button](inputs.md#radio-button) (86)
50
+ - [Rich text editor](inputs.md#rich-text-editor) (5)
51
+ - [Search input](inputs.md#search-input) (29)
52
+ - [Select](inputs.md#select) (82)
53
+ - [Slider](inputs.md#slider) (39)
54
+ - [Text input](inputs.md#text-input) (72)
55
+ - [Textarea](inputs.md#textarea) (51)
56
+ - [Toggle](inputs.md#toggle) (59)
57
+
58
+ ### Data Display
59
+
60
+ - [Accordion](data-display.md#accordion) (101)
61
+ - [Avatar](data-display.md#avatar) (37)
62
+ - [Badge](data-display.md#badge) (122)
63
+ - [Card](data-display.md#card) (79)
64
+ - [Carousel](data-display.md#carousel) (22)
65
+ - [Heading](data-display.md#heading) (28)
66
+ - [Icon](data-display.md#icon) (45)
67
+ - [Image](data-display.md#image) (27)
68
+ - [List](data-display.md#list) (69)
69
+ - [Quote](data-display.md#quote) (11)
70
+ - [Rating](data-display.md#rating) (19)
71
+ - [Table](data-display.md#table) (74)
72
+ - [Tree view](data-display.md#tree-view) (14)
73
+ - [Video](data-display.md#video) (15)
74
+
75
+ ### Feedback
76
+
77
+ - [Alert](feedback.md#alert) (108)
78
+ - [Empty state](feedback.md#empty-state) (16)
79
+ - [Progress bar](feedback.md#progress-bar) (41)
80
+ - [Progress indicator](feedback.md#progress-indicator) (38)
81
+ - [Skeleton](feedback.md#skeleton) (35)
82
+ - [Spinner](feedback.md#spinner) (66)
83
+ - [Toast](feedback.md#toast) (42)
84
+ - [Tooltip](feedback.md#tooltip) (74)
85
+
86
+ ### Overlays
87
+
88
+ - [Drawer](overlays.md#drawer) (38)
89
+ - [Modal](overlays.md#modal) (82)
90
+ - [Popover](overlays.md#popover) (50)
91
+
92
+ ### Layout
93
+
94
+ - [Footer](layout.md#footer) (19)
95
+ - [Header](layout.md#header) (41)
96
+ - [Hero](layout.md#hero) (9)
97
+ - [Separator](layout.md#separator) (33)
98
+ - [Stack](layout.md#stack) (9)
99
+
100
+ ### Utilities
101
+
102
+ - [Visually hidden](utilities.md#visually-hidden) (11)
103
+
104
+ ---
105
+
106
+ *Last updated: March 1, 2026*
package/skills/design-deck/references/component-gallery/components/actions.md ADDED
@@ -0,0 +1,354 @@
1
+ # Actions
2
+
3
+ Components that trigger operations or navigate to other resources.
4
+
5
+ ---
6
+
7
+ ## Button
8
+
9
+ [Browse all 118 examples →](https://component.gallery/components/button/)
10
+
11
+ ### Design System Implementations
12
+
13
+ - [98.css](https://jdan.github.io/98.css/#button) — 98.css · CSS — Code examples, Open source · [preview](https://component.gallery/_astro/-VzVdrDKoscZJfO8I4Vdlz0GwCp5VmEhxhgtP48bcAI_Z2pn59a.webp)
14
+ - [A11Y Style Guide](https://a11y-style-guide.com/style-guide/section-general.html#kssref-general-buttons) — A11Y Style Guide · jQuery — Code examples, Usage guidelines, Accessibility, Unmaintained, Open source · [preview](https://component.gallery/_astro/dOf1L-xwbUXHIr_AzdW569ZITeG_7yf4sFlsco161GY_Z1IDWB3.webp)
15
+ - [Ant Design](https://ant.design/components/button) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/JW14fneoxbvP2Htreg9BHs1JZ_ha9_6TKgGOpAbvHUg_Z2bzjbW.webp)
16
+ - [FloatButton](https://ant.design/components/float-button) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/QS191whp5Oij9nvmPGzeJGZT3vFueWto4JZ9_IjN91A_Z2lBQBb.webp)
17
+ - [Ariakit](https://ariakit.org/components/button) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/_yvdQtjrjwo9v3oUVvdAXIcHf8CS8PElVcbObFLkGYU_Z1cUOY4.webp)
18
+ - [Atlassian Design System](https://atlassian.design/components/button/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/3Dy_idoiozov18rzU9vFqVQsfFJeQ6J_qPdg57SNgQE_Z7TyM1.webp)
19
+ - [Auro](https://auro.alaskaair.com/components/auro/button) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/sazEhVgeZPuCS3pgYajCR5BZJ7YVG8pFNsICJGAOMcc_SPwjk.webp)
20
+ - [Aurora](https://design.gccollab.ca/component/buttons) — Aurora · CSS — Code examples, Tone of voice, Open source, Unmaintained · [preview](https://component.gallery/_astro/droFmwt6-1uhswwucCvXiRWPQm12JV-BruTZohSxA4c_Z11a4Wv.webp)
21
+ - [Backpack](https://www.skyscanner.design/latest/components/button/overview-sxyKum4C) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/95ncWz5ek1s1-xj_TRS4QcmqUiqPzXdNV3627ZQgDEU_1wr9N4.webp)
22
+ - [Floating action button](https://www.skyscanner.design/latest/components/floating-action-button/android-zd7lStkF) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/HcI0kv3SDOJ-XMAfqCfdauw5PRitwcVNiZSI33i1OZE_Z1Dpi9D.webp)
23
+ - [Card button](https://www.skyscanner.design/latest/components/card-button/compose-5pWaGYVz) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/CdhFl2I9oca4Id9YY3pG3S4Woy8Rb20wI0skjh2wPag_Z102Ewv.webp)
24
+ - [Base Web](https://baseweb.design/components/button/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/4Mwd3Zi0MoZqV5GuWjsXzriKw5gjIwp8fePMvJAdGHI_Z1SUiBJ.webp)
25
+ - [Button Timed](https://baseweb.design/components/button-timed/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/u1BdhZGavTl6vNuf0b-VEZSIwk3cXeTU3pBSr7B98lY_Z2jYJzz.webp)
26
+ - [Blueprint](https://blueprintjs.com/docs/#core/components/buttons) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/vnv1LqxGawlzbGzNdIujNWV1lZOMIfKbtpF9EOAaHKE_W2xxz.webp)
27
+ - [Bootstrap](https://getbootstrap.com/docs/4.3/components/buttons/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/HV96wnx8GHkGfvjgiwAftxCBL736yrJ8Ac55kkaTv5k_Z1ceSwJ.webp)
28
+ - [Brighton & Hove City Council Website pattern library](http://design.brighton-hove.gov.uk/website-pattern-library.php?p=in-page-buttons) — Brighton & Hove City Council Website pattern library — Unmaintained · [preview](https://component.gallery/_astro/5cHlPsN9lBQaO6itBxC66eY4jlpY5MCT4nf40hQpav0_Z2eV81o.webp)
29
+ - [Bulma](https://bulma.io/documentation/elements/button/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/Xp2lyWNywyM-_bTsS1c68ug-1FUWIt63MlFPYqOCfJQ_2mmSKn.webp)
30
+ - [Carbon Design System](https://carbondesignsystem.com/components/button/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/VEGax7barLw9IeymLmW2BkLRWZoTtlUpLBzVDv_L5OQ_Zz6YPL.webp)
31
+ - [Cauldron](https://cauldron.dequelabs.com/components/Button) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/tl_BrpErISgiglNOXJGVwKuZCTHb9RpjFXTQKBzkQgI_Z76Amx.webp)
32
+ - [CopyButton](https://cauldron.dequelabs.com/components/CopyButton) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Jz6dM0hT1SG9SoEKCB2GNqsds4AFW5jdYBd9nXEOfM0_ZMqWwv.webp)
33
+ - [IconButton](https://cauldron.dequelabs.com/components/IconButton) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/9dfHVuxyozFNdAKC3s2cghnhn0gQuoJXmTyPOmcCpXw_1o8PMb.webp)
34
+ - [TagButton](https://cauldron.dequelabs.com/components/TagButton) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/6h2e4kUU9bFEjuyeTrz13BSamer14C-QGsVvbyZieQQ_xh61i.webp)
35
+ - [Cedar](https://cedar.rei.com/components/button) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/rMgHLBrDOc-5IpFgpfoSOFf0wcrJgKt3YlnsNDHkNRg_2eLqFf.webp)
36
+ - [Chakra UI](https://chakra-ui.com/docs/components/button) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/t8bTRg0d0pU1C_HYBddhzL1RG3s_NGppa6jvICi1n9I_1gnbhv.webp)
37
+ - [CloseButton](https://chakra-ui.com/docs/components/close-button) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/oILFZQ3Tv63PeX3uZ5stUlJAg8Hx50nFIlr2MzNQRgY_Z1aUOVf.webp)
38
+ - [Icon Button](https://chakra-ui.com/docs/components/icon-button) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/RyKrZy5zSxsCGv-pvHYkUahm9mKgmZWpwOUFG8T0E-0_ZoqzhQ.webp)
39
+ - [Clarity Design System](https://clarity.design/documentation/button) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/gaLLlOnSE32a7fGlROzcEkTKVAlNutOOfYi7tLKq-Jc_sNIry.webp)
40
+ - [Coral](https://design.talend.com/?path=/docs/clickable-button--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/P-7Opt78rx6wco7GPXgWBfNoo6d_1N0vOeESnij1nHA_29DYep.webp)
41
+ - [ButtonIcon](https://design.talend.com/?path=/docs/clickable-buttonicon--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/m0u0s3eurUOpopEAUvbFjOFWyK_uwnW0RKo9WirPUO4_AGRJs.webp)
42
+ - [Crayons](https://crayons.freshworks.com/components/core/button/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/GepyN0RXgiKBD_DJUbKh_TzhuIXYQyA8FPt3hadNupE_Z2g3Dqj.webp)
43
+ - [Decathlon Design System](https://www.decathlon.design/726f8c765/p/8008f8-button/b/50afe1) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/W7PPJSwUAM7vH-ZBSfw7d5hM9_xvk9J12T-mRQY3te0_Z20cySv.webp)
44
+ - [Dell Design System](https://www.delldesignsystem.com/components/button/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/K5yAz3VsOK0AfPJMVo84SS8roolNM75m5cjYC_HRkcE_1aawtP.webp)
45
+ - [Duet Design System](https://www.duetds.com/components/button/) — Duet Design System · Angular, Vue, React — Code examples · [preview](https://component.gallery/_astro/kW3VP12mnXsc-5tovkPluqyHtCX6FGE1sfLL3Q2sjPM_Z2iwXmL.webp)
46
+ - [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/input/button) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/p9pyivta9FjNzW02vEalWGIMC-VNR2Z4MRH65qlHCO4_Z26BXkv.webp)
47
+ - [eBay Playbook](https://playbook.ebay.com/design-system/components/button) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/2HJ9cf_VWDonoZtnBvdYPKgnqC0B2aVbIqrx0HPL_R8_1Lpf8b.webp)
48
+ - [Elastic UI framework](https://eui.elastic.co/docs/components/navigation/buttons/button/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/HweOecjSgGjHVVOtrErge-xB7ESUDZ_FBrLeiAfENiU_1M7uKu.webp)
49
+ - [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/37fb17-button) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/rr8uh5pvCrLZi2t4E8Qi7mzszD4k9zJBvUOrqUyRKsg_1VXDyF.webp)
50
+ - [Flowbite](https://flowbite.com/docs/components/buttons/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/-NCg1IHpnBy4bmVuiT4sCwbdNAI5LZEY_F2BWUXHsH4_ZOmUIo.webp)
51
+ - [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/button) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/TR3TsGTW2V-p8MySY4p_PneaVYsVpt0PVubGdkvvr2Q_Z28soor.webp)
52
+ - [Forma 36](https://f36.contentful.com/components/button) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/ePaiJZ8lUsdwBUzb0eYpDQfNl5xVyYpPk0tvHYt4DLU_1sKYLd.webp)
53
+ - [Copy button](https://f36.contentful.com/components/copy-button) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/zi-EM-h8z4eDI_8eTCLNMXimUICu7hrEM4e1pXkfnI0_Z1kwuB0.webp)
54
+ - [Icon button](https://f36.contentful.com/components/icon-button) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/Z46fzsh94l6XCb4S0Pyvvo6GTg4_6s0gIqiOq7WQ5h8_1birsy.webp)
55
+ - [Geist Design System](https://vercel.com/geist/button) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/4ZENcwyJ-SoDgNLVPCgjqDWIF5IB7V8n3BwPeLA1fNg_Z1jibda.webp)
56
+ - [Gestalt](https://gestalt.pinterest.systems/web/button) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/jin-a5Z9ju4Fb-Dw0rV1cPNRyfYkCkm1LK_JpKnPBgo_1NDqK2.webp)
57
+ - [IconButton](https://gestalt.pinterest.systems/web/iconbutton) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/v6H0GPFLn4sk6PUZJgdy7sYdydmgmhoQhrCs1heGh8I_ZQpf3J.webp)
58
+ - [HelpButton](https://gestalt.pinterest.systems/web/helpbutton) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/sslfu1ulPsr5C1hbvQfBNwD5xuHWShu14cPe6BdDXWQ_ZMLbTX.webp)
59
+ - [IconButtonFloating](https://gestalt.pinterest.systems/web/iconbuttonfloating) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/f-YheUyPEuxHrhFNFaaqVCUTV43zsJ_GP4YCdzh17UY_ZSlQGk.webp)
60
+ - [giffgaff design system](https://www.giffgaff.design/components/for-web/buttons/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/eF92MV3D5hK5Zfd8SA0xk6fSqlyEAGh6JNk2OhMrHPo_V9Eam.webp)
61
+ - [GOLD Design System](https://gold.designsystemau.org/components/buttons/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/N17V2tBffcvJvxffrFeSwuuAku8jK6UTpnSe9a5a_L4_Z9RqKe.webp)
62
+ - [GOV.UK Design System](https://design-system.service.gov.uk/components/button/) — GOV.UK Design System · Nunjucks — Code examples, Usage guidelines, Research, Open source · [preview](https://component.gallery/_astro/tmgxF8QXxPc4bvFXv3fgwIRhIF8Af--pU1M0zu1AJY0_WqoN4.webp)
63
+ - [Grommet](https://v2.grommet.io/button) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/IE9mVOC_2wJ6hNKkk9uOAN2I5XuDpSvBZErKSm_o8zQ_18iv4U.webp)
64
+ - [Headless UI](https://headlessui.com/react/button) — Headless UI · React, Vue — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/6rQ7oOvvUeBb3wRSFaMxtMRUzCFK43LpCN5dyXKioY8_2ttKYN.webp)
65
+ - [Helios](https://helios.hashicorp.design/components/button) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/PYNsrpNe1C1485t72tqpPpPBMYSWRWbnAMa0c-n2GmA_Z1izmWM.webp)
66
+ - [Helsinki Design System](https://hds.hel.fi/components/button) — Helsinki Design System · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/8zOsteFXpp4ycg5dXyKyUbYBPrvxaOt-FjT2cOg_tP4_Z1otIeC.webp)
67
+ - [HeroUI](https://www.heroui.com/docs/components/button) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/ldI9lE8nWnKG5GMyiDjANnm3sQGQEq256xmCp0XRM7I_Z17tdJG.webp)
68
+ - [Instructure-UI](https://instructure.design/#Button) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/hbk56OcbQX3ifaOPAMy6PlSZUtC1ibeMHWWzdamPyuo_Z254PkC.webp)
69
+ - [CloseButton](https://instructure.design/#CloseButton) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/0PViwV57FY4ehTVpSQb_W_MVQxHkHVws6VUo_iTOg6M_1ydJDm.webp)
70
+ - [CondensedButton](https://instructure.design/#CondensedButton) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/mVYm-8mTmxc_4hwpbPhUx6tHKQuLGvc12YsKr7Ij6zY_1o2mUy.webp)
71
+ - [IconButton](https://instructure.design/#IconButton) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/TzFLA76yntYHIgfHKCq3Ombuda2xyOwrov9CES8Je7o_11KEMI.webp)
72
+ - [ToggleButton](https://instructure.design/#ToggleButton) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/QQ4mSWMy8NnUvRLTzP-Nv8e0xhPZAIgkdmUt49GW6P8_Z2itbrd.webp)
73
+ - [Jøkul Designsystem](https://jokul.fremtind.no/komponenter/buttons) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/hRzO4gDQtFcvpE5EOODUpWAaaHnM9gCO_Uyuqn7dHmM_1Wgv92.webp)
74
+ - [IconButton](https://jokul.fremtind.no/komponenter/iconbutton) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/CqO4_sJdMo7MXjJH2Os6h4JHZEvJWiwZw-iG5Ca0Yqc_en8JS.webp)
75
+ - [Lightning Design System](https://www.lightningdesignsystem.com/components/buttons/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/BZoYCQ2Rm_tsE4R_Hgsvvn9nnP7Sojul3i1GAE23z6I_Z2361OF.webp)
76
+ - [Material Design](https://m3.material.io/components/all-buttons) — Material Design · Mobile, Web Components, Sass — Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/NDhmDtw5H_LOPbPJjenxnbDx8f2MociiGFYK7CCajJI_2rL4RB.webp)
77
+ - [Morningstar Product System](https://design.morningstar.com/systems/product/components/button) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/cfKUsvjRD-LaPPw0POfmbT00Bfuweru5KOmFf3q1X7s_1HYcwU.webp)
78
+ - [Mozilla Protocol](https://protocol.mozilla.org/components/detail/button--primary.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/jwkUf__ettBSLVXAMhOSBqHK65d-sEX8w9yhcADgc_c_Z104Gkp.webp)
79
+ - [Download button](https://protocol.mozilla.org/components/detail/download-button--default.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/1HEtlCn2tZqgivBI9HQpt69uNyCjAl89CW4qqjH9Z0U_Z24COYB.webp)
80
+ - [Nessie](https://design.ns.nl/4a05a30ad/p/886087-button) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/ovxnyocLofGg0heWO47k9ptyJ2o3KpGDNU4RHsZ1I5E_2wTap1.webp)
81
+ - [NewsKit](https://www.newskit.co.uk/components/button/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/PJA8frf5t-7LZ9iWgBrY_KkNcaqzYRD6bhaN3fk6uPM_loUjb.webp)
82
+ - [Buttons](https://service-manual.nhs.uk/design-system/components/buttons) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/JYKfjugYyky8x9jn_kDEnE6-gOFOKg08Zow7ag0yPO0_12kHYX.webp)
83
+ - [No Style Design System](https://nostyle.onrender.com/components/button) — No Style Design System · Sass, jQuery — Open source, Unmaintained · [preview](https://component.gallery/_astro/tyoj_GX3Fayh_8T-c1e5J1HehTGzzzmDxjB1gz-1Wj8_NFqCK.webp)
84
+ - [Nord Design System](https://nordhealth.design/components/button/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/tG-FEaMrVisI70hCWQ01Ey_xzaxBSJsDoZFMa_65Bv0_25YxFN.webp)
85
+ - [ONS Design System](https://ons-design-system.netlify.app/components/button/) — ONS Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/_oZ0odO1isl0KKktN57Lhyi_q0qvBPCEGvFyVddVAx0_Z89uf6.webp)
86
+ - [Ontario Design System](https://designsystem.ontario.ca/components/detail/buttons.html) — Ontario Design System · HTML, Sass — Code examples, Usage guidelines, Accessibility · [preview](https://component.gallery/_astro/JEnC6X805sRB4OEhwcYY1x4dssC8e7Ag0lDH_QBhFAo_2hxoJp.webp)
87
+ - [Orbit](https://orbit.kiwi/components/button/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/nRNkqyv6-oatQBo8i521KcrV4Du0zcrRF1uYivMDCvg_ZzXQkK.webp)
88
+ - [Button link](https://orbit.kiwi/components/buttonlink/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/ApAfWz4oIdfx1EYs47_CjR12-CIDkFVCmwFhu1FDnyY_1S4LuL.webp)
89
+ - [Pajamas](https://design.gitlab.com/components/button) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/x7OCHP_2q8fRBL5D9BDVOSZZOrCngLSfqX4idORazDA_ZnwTJA.webp)
90
+ - [Paste](https://paste.twilio.design/components/button) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/LwkWvWJtCwi9OEfJE1TZe8L9enAmwsWjJZDCYgqi7Z0_1h7Kiv.webp)
91
+ - [PatternFly](https://www.patternfly.org/components/button) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/QavcRZc3IIfonGLP5pyiwO2OEQKD-5mafsG935_z6TA_f7qHp.webp)
92
+ - [Pharos](https://pharos.jstor.org/components/button) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/7nBhvJynoRcKad5jhg_1RIXpYcDaFPD1H7KI8iWBcEU_1f4mGg.webp)
93
+ - [Polaris](https://polaris.shopify.com/components/actions/button) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/0nUSWs6CJPm25glHJp1TQK1gqhwDxbSEQHPp3vvj7R8_Z2gsOwW.webp)
94
+ - [Porsche Design System](https://designsystem.porsche.com/v3/components/button/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/oeyqsl6TQOSgXgsUrv5piC6bunrbJxOqt4egCd3bO-c_17Issb.webp)
95
+ - [Button Pure](https://designsystem.porsche.com/v3/components/button-pure/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/U3U3m2v2mYKPCgoxRMdadwvJBXQDPhoz3VcJcpctdhY_Z1nY7Ac.webp)
96
+ - [Button Tile](https://designsystem.porsche.com/v3/components/button-tile/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/nVz3kA6SaJjGrVJgL9Ev3uOSyUwLQ_Qcwqzv31kqKZI_27JKz6.webp)
97
+ - [Primer](https://primer.style/design/components/button) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/ohZkOMHfA3NLWBTP1p4yQ7NtCrKm10nm5d7MwifWXX8_ZmTjPD.webp)
98
+ - [Icon button](https://primer.style/design/components/icon-button) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/tUpfzlF1Xp6Wgkra24SdMZEQ7I6zuJk42wd3wAQ-Gco_Z1RECkI.webp)
99
+ - [Purple3](https://design.herokai.com/purple3/docs/#buttons) — Purple3 · CSS — Code examples, Unmaintained · [preview](https://component.gallery/_astro/eSnekCE2RK44q4h-c1BaWkgf_fCuVsCa8SDLFayMO8A_1FqyBY.webp)
100
+ - [Quasar Framework](https://quasar.dev/vue-components/button) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/_ykdjGQ_mmd9udnszvul0Shab1sed_KYAEkwJ-WQe0U_Z10I1BF.webp)
101
+ - [Floating action button](https://quasar.dev/vue-components/floating-action-button) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/PGw7kObgVawgEe9NFrSrcq7ZzvFYsapnXrxYwPBUf3c_ZIKbMo.webp)
102
+ - [Red Hat design system](https://ux.redhat.com/elements/button/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/XLNLiKgk46HbhC-yVPK1BPLY2uHXNDPg7ZKunHLoUcI_ZUDXJh.webp)
103
+ - [Ruter Components](https://components.ruter.as/#/Components/Buttons/Button) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/yQ5NrdP5ag2bWyjZSxdHNMBm8co542XfkNHdzHBH5hw_ukHp6.webp)
104
+ - [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/button/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/GF2jnqr9YZlqPMm6OkPRa5RGRAihVWSsEHxjBm7VknQ_1kgUDn.webp)
105
+ - [SEB Design Library](https://designlibrary.sebgroup.com/components/forms/button/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/qFwiy5DKUmdRqQwNH_p3qWgZ1b9KqDM1BebDm3yi66k_Z2pz507.webp)
106
+ - [Seeds](https://sproutsocial.com/seeds/components/button) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/nlEyWrHZP3a6dKufLOgkJ8BA17X-3fRYT7JYJHqguvM_Z2vdkSV.webp)
107
+ - [Seek style guide](https://seek-oss.github.io/seek-style-guide/button) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/trpydXXB8OZC19QavqdseOIfMg2aYUQ9BYzCzDI1bXc_25SV7v.webp)
108
+ - [shadcn/ui](https://ui.shadcn.com/docs/components/button) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/P12R9i5DVoOBfw4wTbvgm21YdYYMF4ldQJ8W5lfgxBQ_Z1dkq5P.webp)
109
+ - [Toggle](https://ui.shadcn.com/docs/components/toggle) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/ZcsT3GVzayNBoJ3eN1rwrb9HVLOSSxa_sTs6iwUZrAE_2dO37h.webp)
110
+ - [Shoelace](https://shoelace.style/components/button) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/OLWxZET6Klft19DEzmsQqJyA6_mHPVn2QHecYAZOyyQ_EmNuH.webp)
111
+ - [Icon button](https://shoelace.style/components/icon-button) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/r_GaiRX5Th4UVcGbT5MBKWEVFlZg40TIFVGxrUIuA9w_1tPsbR.webp)
112
+ - [Source](https://theguardian.design/2a1e5182b/p/435225-button) — Source · React — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/T7qDIsSu0sg0PGym6EblnTh8q1CTJRuVR549Hrz6xOA_Z1CheOL.webp)
113
+ - [Action button](https://spectrum.adobe.com/page/action-button/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/kB9iNNHX9dAc4MrtmgSdJx3NIPqhwZAM7ov4zd08hL0_Z1kiGoR.webp)
114
+ - [Spectrum](https://spectrum.adobe.com/page/button/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/tzTGSdMxCZPGkmxdhdAAavAwSeZ6yH6fqlwOucf376E_22rkcy.webp)
115
+ - [Stacks](https://stackoverflow.design/product/components/buttons) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/rOKMZW77w34TPd62ZUe6kvQb6LvIOlj2OkyKqgIiyFY_1SBB2q.webp)
116
+ - [SubZero](https://www.subzero.axis.bank.in/components/button) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/MmthD0Cio_lshgsiBpkysf-oljW7gbfObSIBOIoBlxI_1FoYb8.webp)
117
+ - [Floating Action Button](https://www.subzero.axis.bank.in/components/fab) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/IjZrgADTtoPaJ17-wDavL7asDr-P2G-j-2iJtu4slso_ZRvgQT.webp)
118
+ - [Thumbprint ](https://thumbprint.design/components/button/usage/) — Thumbprint · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/yotYkKI0DiQl1M1I3eOF0gYXFXkkHcWtd0BCbmDTorU_2iNrin.webp)
119
+ - [United States Web Design System](https://designsystem.digital.gov/components/button/) — United States Web Design System · Nunjucks — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/Sr7kUYbDxfzRZ1EuVeJg9SpbiRBHa2tJ4DeJb7D9Ltc_ZEVVfE.webp)
120
+ - [uStyle](https://ustyle.guide/pattern-library/components.html#buttons) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/F_k17aCk6ldwT4lt85oxmVSIEmIGF6CdPwklxwtimB8_tDpbl.webp)
121
+ - [Visa Product Design System](https://design.visa.com/components/button/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/_JeC4vmia25JVNMTXSSFzRwcBloOsxlvk2-x07PVRb0_1WQvlO.webp)
122
+ - [W3C design system](https://design-system.w3.org/styles/buttons.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/YVqc8fF08vQfowqX1Mx5YoB0Lv84jMU0fuakuFX8r3M_ZiHXVy.webp)
123
+ - [Wanda](https://design.wonderflow.ai/get-started/components/actions/button) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/wYM4MXgbXrxvGwBWRg5BF0RuhjSIc5bbc3r476pGggY_1BA1V6.webp)
124
+ - [Icon button](https://design.wonderflow.ai/get-started/components/actions/icon-button) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/szp6UlRqk4vuYXFK0UKeWB_70Ve_tBoShh-gqzZftS0_2wPEi3.webp)
125
+ - [Split button](https://design.wonderflow.ai/get-started/components/actions/split-button) — Wanda · React, CSS Modules — Code examples, Open source · [preview](https://component.gallery/_astro/RT1Pr3MMraVlIEEk9LjyxhnlAZqeUGpfo0qmKlLUy6c_njrdO.webp)
126
+ - [Web Awesome](https://webawesome.com/docs/components/button/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/vQmxSGziubglqjLErmBLlnnM5gKjdrKE5lFTLbBbPN8_o90yR.webp)
127
+ - [West Midlands Network Design System](https://designsystem.tfwm.org.uk/components/buttons/) — West Midlands Network Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/0GKozMAxOwk6ILiW3lMeNYzFrtoHjQbMRoOrld6V_Gw_Z20P00o.webp)
128
+ - [Wise Design](https://wise.design/components/button) — Wise Design · Mobile — Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/N9a9nbjXAb1Mmyt6vJRkyYKNnAUIB2KIFvwTiSZ05cY_Z1mq2Rm.webp)
129
+ - [Circular button](https://wise.design/components/circular-button) — Wise Design · Mobile — Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/6sNhBconHor9nbxIYl1r7C-ceGhsZjuOElQ15qwuNIs_Zbot5G.webp)
130
+ - [Workday Canvas Design System](https://canvas.workday.com/components/buttons/button) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/oGZfuh7e-BwIWjUNTresRN46NN8dF3E4nfKanZhnscY_Z2pMhFL.webp)
131
+
132
+ ---
133
+
134
+ ## Button group
135
+
136
+ **Also known as:** Toolbar
137
+
138
+ [Browse all 36 examples →](https://component.gallery/components/button-group/)
139
+
140
+ ### Design System Implementations
141
+
142
+ - [Button Group](https://baseweb.design/components/button-group/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/sI-PfoanlHcIJVK0frbZ_FT_-kMQa_W9EdwFNEmZESA_6OvrK.webp)
143
+ - [Button Dock](https://baseweb.design/components/button-dock/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/LOiebdppV8ASRMnl60m9Rk0IXLCVsy75cf1sXgam4SI_Z1C1M6G.webp)
144
+ - [Blueprint](https://blueprintjs.com/docs/#core/components/button-group) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/cT3NCTngMriKqft_0k4wtANo-v4lGModvufwsDJCZv4_163mim.webp)
145
+ - [Bootstrap](https://getbootstrap.com/docs/4.3/components/button-group/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/AdxpX7PBAc_KkV338BIVWHIqEo_0_rf81w-_vNftlyM_zFDMM.webp)
146
+ - [Clarity Design System](https://clarity.design/documentation/button-group) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/lir6D4ctQXQdCi8YDG00ouDE88jpPopoH19SPyPeze4_Zjyyvm.webp)
147
+ - [Form buttons](https://design.talend.com/?path=/docs/form-buttons--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/zGgrVYyYcwoLJ6C5ozvzFZTSSlxrfOjbGgxvHWqwHew_1T3nGU.webp)
148
+ - [Crayons](https://crayons.freshworks.com/components/core/button-group/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/nbNlZ8YUloLFDgWC4vhmNPO37t_rmf0AMrWHeuy0lwo_hw2OJ.webp)
149
+ - [Elastic UI framework](https://eui.elastic.co/docs/components/navigation/buttons/group/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/h5t9oFG_B0s3x5fczFCnPuekNaOfeVCwpXP9u-TTODk_wCyUS.webp)
150
+ - [ButtonGroup](https://designsystem.elisa.fi/9b207b2c3/p/923d96-buttongroup) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/EYTXUcuQ8gjts9xk86e1IMrnaKK-HkreUj-MpO1lH84_1mngyB.webp)
151
+ - [Flowbite](https://flowbite.com/docs/components/button-group/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/MVKiXk5Pl3DWnlX-XnrjDnFHrjLXGoZAeb2YNgJcc54_1qUGVq.webp)
152
+ - [CommandBar](https://developer.microsoft.com/en-us/fluentui#/controls/web/commandbar) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/XAPNf1bjZo_tm7LMx77pencMw4NXry_G3YBBkkTDo1U_ZtWEvH.webp)
153
+ - [Forma 36](https://f36.contentful.com/components/button-group) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/EM09cizv9p9LOQqFvsWbo7HxHJE1kcH-3XdUNdtexJA_ZWf1AH.webp)
154
+ - [ButtonGroup](https://gestalt.pinterest.systems/web/buttongroup) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/0qBHFB1kC6__l7kkU9X7ln3RElhySJPRl2z78M6mR3E_Z1Jtf6F.webp)
155
+ - [Button set](https://helios.hashicorp.design/components/button-set) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/cHONq_Eol-FIXntQBxyU_KVfokTG21_H5LMgwB_1o8A_2lDMbU.webp)
156
+ - [Button Group](https://www.lightningdesignsystem.com/components/button-groups/) — Lightning Design System · React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/Gnj2TcyKhk2aHVUDfW8Lftb2H3myhS22wizuldTHKcw_dYE8o.webp)
157
+ - [Button container](https://protocol.mozilla.org/components/detail/button-container--default.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/doxSMsgyKDIyupzPcOpb9Ucz6LhnTCex7pSAfLrAPYE_Z29OYOc.webp)
158
+ - [Nessie](https://design.ns.nl/4a05a30ad/p/61b5f9-button-group) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/FTu9zsaWSZQx3waqwIikOeCmSrGz3OwwpJLYvu-_DmY_13Bxtn.webp)
159
+ - [Nord Design System](https://nordhealth.design/components/button-group/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/EzCPwPz37Tmt8vCyalZr4U9Tbcu2siJP2yFfMSqBKSw_Z1tJ6Xa.webp)
160
+ - [Orbit](https://orbit.kiwi/components/buttongroup/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/x4IBNw4UVj3dVSHFbrZXCuVPvjzgWNGkzhzJbfGCgy4_Zy5cSg.webp)
161
+ - [Action list](https://www.patternfly.org/components/action-list) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/X_erFWQg6ExBCrzxOGpi1EWt-_MI6xCU6DgI4JQQu6c_ZOMmtP.webp)
162
+ - [Polaris](https://polaris.shopify.com/components/actions/button-group) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/-KvPeTHm7MLa4BMynuorLsrQjhCkBsRezgF4mCwLIkU_2wd5PN.webp)
163
+ - [Page actions](https://polaris.shopify.com/components/actions/page-actions) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/iIxy_ykoYSQX2n8bVvZurXBDpgC0yxA5zF3ymg_AmZc_1oWqro.webp)
164
+ - [Button Group](https://designsystem.porsche.com/v3/components/button-group/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/Z51UumlUUFEOAShUk2k_KmdNPSULnsTs8cNAdn3g73o_Z1jH2Bz.webp)
165
+ - [Action bar](https://primer.style/design/components/action-bar) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/4k-XzHb6BBsdqHd5kgA7KE_O4I2x2A0XqruzCWVYkp0_Z1uTSon.webp)
166
+ - [Primer](https://primer.style/design/components/button-group) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/iYIcrN8fK60BHTss2R8-QLOt2uRA8OAE_1KEQzYrImQ_14uHAF.webp)
167
+ - [Button Group](https://quasar.dev/vue-components/button-group) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/GQ3kMFlAAvZTYDOOw73fXjw-R5_-4vYeIPXfSa3dEBQ_ZbyeY1.webp)
168
+ - [Button Group](https://components.ruter.as/#/Components/Buttons/ButtonGroup) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/Lgmy7XBOKw5eD9sX0dFZsTyJdC1zywwRyY3fgIyykwk_Z1OoJ0V.webp)
169
+ - [Button Group](https://seek-oss.github.io/seek-style-guide/button-group) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/_M4gmTgBjOp25WzAn2DbE0Kuxi5cTLeBJVlgDYKo09s_ZgLAdc.webp)
170
+ - [Toggle Group](https://ui.shadcn.com/docs/components/toggle-group) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/UPQFY6QFH2TwRKQSQO_vKtBPsJyHG5SS2JT_ekjg74I_Z2p7rpf.webp)
171
+ - [Shoelace](https://shoelace.style/components/button-group) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/mTaegsTeij2h3FYXIvgk7yB7GGyWH16slIGftyIL6UQ_Z24VdUR.webp)
172
+ - [Action group](https://spectrum.adobe.com/page/action-group/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/Y_OtHfKgolm_pDIVJkHU4BfhP__n_Bmc3KSEkQVZVCE_Z1dCIc8.webp)
173
+ - [Spectrum](https://spectrum.adobe.com/page/button-group/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/qsAT4-zS_GKKQzvEi4Lt4tG3sOelgDeAaAyJbgixXCA_233jLy.webp)
174
+ - [Button Group](https://stackoverflow.design/product/components/button-groups) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/q1_bzsxpNZp_xChSrj0Tu-m2pfyIS76AaUumvnca9Po_Z18hnuk.webp)
175
+ - [Button Row](https://thumbprint.design/components/button-row/react/) — Thumbprint · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/Q0txj79NGOJn4sWZbahXWCBqAsqZ7ceVn13byLM3sns_ZdpJJs.webp)
176
+ - [Web Awesome](https://webawesome.com/docs/components/button-group/) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/SS2h5gWcAX9tCrkIKKvxweqD7ncZV1j5a-1jXj_Gr44_Z1ehLGl.webp)
177
+ - [Action Bar](https://canvas.workday.com/components/buttons/action-bar) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/n0ERonW6H3HovAVfNvyUwbv0ahMRxtvRkNEHrjgaWZc_Z1EGUcp.webp)
178
+
179
+ ---
180
+
181
+ ## Dropdown menu
182
+
183
+ **Also known as:** Select menu
184
+
185
+ [Browse all 48 examples →](https://component.gallery/components/dropdown-menu/)
186
+
187
+ ### Design System Implementations
188
+
189
+ - [Dropdown](https://ant.design/components/dropdown) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/PXNt4UPe5WcRGIPHowtX8nrl-PjVugqEOTD83bjKaG0_278nsk.webp)
190
+ - [Menu](https://ariakit.org/components/menu) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/_e0gy6Xl098FjmQVH-GzRBp6nkjsbzKAl6SyWHVyMgA_e0AAO.webp)
191
+ - [Menubar](https://ariakit.org/components/menubar) — Ariakit · React — Code examples, Open source, Accessibility · [preview](https://component.gallery/_astro/3MlBDluhdM5ullptOfBF9vDzzIzFXPCVwaOVLTIMgfo_Z2tMkPs.webp)
192
+ - [Atlassian Design System](https://atlassian.design/components/dropdown-menu/examples) — Atlassian Design System · React — Code examples, Usage guidelines, Tone of voice, Accessibility · [preview](https://component.gallery/_astro/opkIlPFBCdSyt-42ABet5ov9MYWRrAN2-bidh1DO9_g_cPvgq.webp)
193
+ - [Menu](https://blueprintjs.com/docs/#core/components/menu) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/OXswFcAEhp_WFMqmbBpLDU6j_cqlGRh5w-y4QcL3oEc_XtTs6.webp)
194
+ - [Dropdown](https://getbootstrap.com/docs/4.3/components/dropdowns/) — Bootstrap · Sass — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/ZC-hPOkVh_JKX1nwlSgvezyh_Dp4QSje4-u8juiEY0U_1KI6rs.webp)
195
+ - [Dropdown](https://bulma.io/documentation/components/dropdown/) — Bulma · Sass — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/QlewbnLpiDllq1mvKKvAqjdV6i-r0_7uHxfNRiWC97M_Z1twaNb.webp)
196
+ - [Overflow menu](https://carbondesignsystem.com/components/overflow-menu/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/P48K5UZg8LeStZaGWFInEi8k04UQn2h39RoQXgUEmps_1baFPt.webp)
197
+ - [OptionsMenu](https://cauldron.dequelabs.com/components/OptionsMenu) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/nwpFgTMAULgB5YnAtcw7i3GM7MiURfszEVSDdLf6zhY_Z1O1T3e.webp)
198
+ - [Dropdown](https://clarity.design/documentation/dropdown) — Clarity Design System · CSS, Angular, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/PiYQNzgMHge3K0fKDiNnzrVSTjecsw88Qqcio_y7oxM_bWjLY.webp)
199
+ - [Dropdown](https://design.talend.com/?path=/docs/clickable-dropdown--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/uKeJLx05rohMFRX-50hIJGKqYgaJtYJhCXTUeA5iujY_1kxSHc.webp)
200
+ - [Menu](https://crayons.freshworks.com/components/core/menu/) — Crayons · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/An71mSn8s_EyiTRiHB0WA_8_Hp555auE204nDm_pi5U_Z1wXfYN.webp)
201
+ - [Dropdown](https://www.decathlon.design/726f8c765/p/42d824-dropdown/b/6647a9) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/hx4uu2wK-1bMIllRwCKTb1ZJgzBsdK5fUrxLX8HDS_E_1bG34l.webp)
202
+ - [Action menu](https://www.delldesignsystem.com/components/action-menu/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/U_xRo80lEWzyXKR7hg2Z1kZhf8mvN4AEvSLEDAD5o7Y_Z1B1UMo.webp)
203
+ - [Listbox Button](https://ebay.gitbook.io/mindpatterns/input/listbox-button) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/yU7Gbir5rQu7gJQmBysSz_SLN8ig5aKQEg0sgOO0pYw_Z3HMxY.webp)
204
+ - [Listbox](https://ebay.gitbook.io/mindpatterns/input/listbox) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source
205
+ - [Context menu](https://eui.elastic.co/docs/components/navigation/context-menu/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/g3XhjMY2CEE1Bhdwg7P23k1l8HmMcGaAPXrVFlhfuG4_1EOEGh.webp)
206
+ - [Select Menu](https://evergreen.segment.com/components/select-menu) — Evergreen · React — Open source · [preview](https://component.gallery/_astro/MlGxLLzzcHP60bi_WNmqNaBttSSDhGPBDTYImeDZiQ8_Z2hUi1.webp)
207
+ - [Dropdown](https://flowbite.com/docs/components/dropdowns/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/Cx4pBDyeTkDYR-wKJdatrBwblKC7TzMEOINL3tHaurU_ZIbAhO.webp)
208
+ - [Dropdown](https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/JNY2Jb7Jc_jiG8tQSC8u3WX7LvsrlsfLuYWWlR_GJIk_ZMAEYQ.webp)
209
+ - [ContextualMenu](https://developer.microsoft.com/en-us/fluentui#/controls/web/contextualmenu) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/T7lJ517sY_zhzZo89BII7tsgN0gUiU5LCZ-QPLz6PXw_Z1CquMq.webp)
210
+ - [Menu](https://f36.contentful.com/components/menu) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/miC6R5daVtaLT_PKCormKdx_i2tXfK2yVe38Jm05EiI_Zk25H7.webp)
211
+ - [Menu](https://vercel.com/geist/menu) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/WK73XJexj1U_Mg60yBuinuz9qPMn0l8E-qK4R1cYRKA_OHYET.webp)
212
+ - [Dropdown](https://gestalt.pinterest.systems/web/dropdown) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/FyYx2pJV7rZzMT2bFrSzuKoJlsaSYX8h-ZIWrn7gD_I_Z2hswPR.webp)
213
+ - [Menu](https://v2.grommet.io/menu) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/1kmgxeEjae1t8rAKz0NpwDACDqm9um_yNj54UKHWNsQ_1sC56e.webp)
214
+ - [Dropdown Menu](https://headlessui.com/react/menu) — Headless UI · React, Vue — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/aS44bKc2H8xBs81Xljl6_GOfZlK0jHB9u-a5TdVJra8_Z1oD5uL.webp)
215
+ - [Dropdown](https://helios.hashicorp.design/components/dropdown) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/RldQ8GIL35hIN9kJ86K_qZlRqkaM5Mpn1u-FAOaKkSM_ZMNsEk.webp)
216
+ - [Dropdown](https://www.heroui.com/docs/components/dropdown) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/iULUSPf-gCIk5Ks_F4BW_h_0HXxLyiGnGMAOmqtlSBs_ZTjuA4.webp)
217
+ - [Menu](https://instructure.design/#Menu) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/Tdz520SJ5RztMbxi_17ZEcxePi1160I2hco360UH9DY_Z1fO07C.webp)
218
+ - [Menu list](https://protocol.mozilla.org/components/detail/menu-list--default.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/xzSzhIyfeYouj2pBay5j-RTI8bONLkESK8qcDiJc6CU_Z20ik1i.webp)
219
+ - [Content menu](https://design.ns.nl/4a05a30ad/p/30fd20-context-menu) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/RknEvvlnVTny9drh3vQ0KP_GXwMfawTSeieEzOypg0k_29aajC.webp)
220
+ - [Dropdown](https://nordhealth.design/components/dropdown/) — Nord Design System · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/jil4AM9XlTqFlWwDx2JyICuncrS3l2p_bch8WbEDBu8_Z1c1lP9.webp)
221
+ - [Disclosure](https://design.gitlab.com/components/dropdown-disclosure) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/CqpomZyNbAwlpjFGUIr1f1E6FQUrsSDxAf06XFFJpqw_1aVXtS.webp)
222
+ - [Menu](https://paste.twilio.design/components/menu) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/0jq0PKxSf9UuwInxd0-L4n5PxZ5p4tdL861HTg_bOOA_26YWYS.webp)
223
+ - [Dropdown](https://www.patternfly.org/components/menus/dropdown) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/94Grk47WcUg282eGcKpMFJpK2uJg93yZaRVRRoJzJT4_27SMqI.webp)
224
+ - [Dropdown](https://design.herokai.com/purple3/docs/#dropdowns) — Purple3 · CSS — Code examples, Unmaintained · [preview](https://component.gallery/_astro/B1PBWa4vGdYWIQnyb-LSB9jEpCCcMHzuYvppm2aXox0_Z1fh4PH.webp)
225
+ - [Dropdown Button](https://quasar.dev/vue-components/button-dropdown) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/Zr_-KRZuCTrOpDMGcjukEXRJ9705mCHEYNwp959v168_Z2qdNup.webp)
226
+ - [Menu](https://quasar.dev/vue-components/menu) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/e4n_6qAb6vgBN3kERNcl9x6SslfEsNYVW8e8DjnRc3E_mVjQX.webp)
227
+ - [Radix Primitives](https://radix-ui.com/primitives/docs/components/dropdown-menu) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/zuyc0fBrbb2Pic39bK2I4047dIDIlx4qW20kE1n-_gs_Z1gqmmn.webp)
228
+ - [Listbox](https://reach.tech/listbox) — Reach UI · React — Accessibility, Code examples, Open source · [preview](https://component.gallery/_astro/NTXaH7OdINpK2PK9eydBWePHUcuCVDTQiuuGx2iE2Kc_1kjbdR.webp)
229
+ - [Menu button](https://reach.tech/menu-button) — Reach UI · React — Accessibility, Code examples, Open source · [preview](https://component.gallery/_astro/dmHB_JolWkKf1RyotHSbe-VddJ3QLcINzBtTQorOJyQ_ZwS6jm.webp)
230
+ - [Dropdown](https://components.ruter.as/#/Components/Dropdown/Dropdown) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/aqvdXbQMAQaUIME_cXFv8kS-I0HHCmtT04bkwhJ6fjA_Z2dleOV.webp)
231
+ - [Dropdown Menu](https://ui.shadcn.com/docs/components/dropdown-menu) — shadcn/ui · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/QZYwzeCFviNRVzmJgRI_AV7D5gu-_NUeJf3l2EJjtoU_2pNfaN.webp)
232
+ - [Dropdown](https://shoelace.style/components/dropdown) — Shoelace · Web Components — Code examples, Open source · [preview](https://component.gallery/_astro/vjgW4h2LVtiVH_-S_ZzDYGEdcbXJeCu85EM6PbAQyWw_Z2nBjwX.webp)
233
+ - [Select box](https://theguardian.design/2a1e5182b/p/663879-select-box) — Source · React — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/mlI-jKotMDEnJqAsLsTwAUkufmHeBV1Sgrmdeqo_8L0_Z1U93L8.webp)
234
+ - [Visa Product Design System](https://design.visa.com/components/dropdown-menu/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/v1J7-8cIKGRJ1rKeVhNAf32Nd--J87iBotRhDiEsLks_2fXFMl.webp)
235
+ - [Dropdown](https://webawesome.com/docs/components/dropdown) — Web Awesome · Web Components — Open source, Code examples · [preview](https://component.gallery/_astro/_7s2OkCg8uqBbXKirTaAoNibZJE1dHIW1hiRu25-UIg_Z28oVhV.webp)
236
+ - [Menu](https://canvas.workday.com/components/popups/menu) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/SWM0npw-djOoxom3lxg1XV7Ik6CSp0PsPSK9jhG3yt0_Z6DCS2.webp)
237
+
238
+ ---
239
+
240
+ ## Link
241
+
242
+ **Also known as:** Anchor · Hyperlink
243
+
244
+ [Browse all 64 examples →](https://component.gallery/components/link/)
245
+
246
+ ### Design System Implementations
247
+
248
+ - [Hyperlink](https://auro.alaskaair.com/components/auro/hyperlink) — Auro · Web Components, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/E1GHTTMDSE2aQHN6kyjIbUq5gMIbhfHjSARZT3KWrpE_1v2NMC.webp)
249
+ - [Aurora](https://design.gccollab.ca/component/links) — Aurora · CSS — Code examples, Tone of voice, Open source, Unmaintained · [preview](https://component.gallery/_astro/Yg47ev7meDOEV6bi7qqp3b9CslENXukY20DvoGq_ABc_2to8ml.webp)
250
+ - [Backpack](https://www.skyscanner.design/latest/components/link/web-tBkgNmHW) — Backpack · Mobile, React — Code examples, Usage guidelines, Open source, Tone of voice · [preview](https://component.gallery/_astro/1mu4Vn4JDLS0CyuZgeI-BAcsh2BI25g4v6fvor7IVW4_29lpqh.webp)
251
+ - [Base Web](https://baseweb.design/components/link/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/Gysny-_VRkwpEk484pCOiRIaBiIxBGLZFVl8lbwwRQ0_1JOF97.webp)
252
+ - [External linking](https://www.bbc.co.uk/gel/guidelines/external-linking) — BBC Global Experience Language — Accessibility, Usage guidelines, Unmaintained · [preview](https://component.gallery/_astro/vJUYJ_pgpe6dVOsrgTqX5KPcYnmAa7lJSQ72MOshfdc_Z11n1Ba.webp)
253
+ - [Brighton & Hove City Council Website pattern library](http://design.brighton-hove.gov.uk/website-pattern-library.php?p=in-page-links) — Brighton & Hove City Council Website pattern library — Unmaintained · [preview](https://component.gallery/_astro/C1GH3IbE12RF8QEBdFYdzpr3vHUtQK9WWXK-Qz7a2Jw_FNHKe.webp)
254
+ - [Carbon Design System](https://carbondesignsystem.com/components/link/usage/) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/ZBllkJEv6O0gkKOB2i-OGBM0P9rW3h5h454hwku7tmY_Z14LrvF.webp)
255
+ - [Cauldron](https://cauldron.dequelabs.com/components/Link) — Cauldron · React, CSS — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/IrQ88tDURp_W3jZudLmeZPbV-4izkTHxzjGcdFJeNRs_2lnLhw.webp)
256
+ - [Cedar](https://cedar.rei.com/components/link) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/m1LkeygE1knleoG4IVfpOY4cpwZ4t77WbDOw79nizwM_gqKeA.webp)
257
+ - [Chakra UI](https://chakra-ui.com/docs/components/link) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/wA1MASx_uLzIpMEa6R9mKcTfPigQel-brrfLkqs4W8k_Z1XBnJl.webp)
258
+ - [Coral](https://design.talend.com/?path=/docs/clickable-link--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/_imb7IrFfk-JhPoMQuycvJwyKOabmAXJ6sY2zILmzRY_4xwAq.webp)
259
+ - [Button as link](https://design.talend.com/?path=/docs/clickable-buttonaslink--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/H8W8Q3j4XxIbWcwGUjYmLwXr82gqtlMn78-_2VKottI_Z1kUYCB.webp)
260
+ - [Decathlon Design System](https://www.decathlon.design/726f8c765/p/086ae8-link/b/5496b9) — Decathlon Design System · CSS, React, Svelte, Vue, Web Components — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/9phbtvLy7FyKZR9EOuxnqQwf6JPGfNe0PrRoiLotJHw_Z1DunIl.webp)
261
+ - [Dell Design System](https://www.delldesignsystem.com/components/link/) — Dell Design System · Vanilla JS — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/2mSJA5xTK_S-pb3Y7zm5YHEBhp2pW-GaTbDG290-kQU_Z1qbMyB.webp)
262
+ - [Duet Design System](https://www.duetds.com/components/link/) — Duet Design System · Angular, Vue, React — Code examples · [preview](https://component.gallery/_astro/C3BFmBCOEN4w1EA-DGhZKnAZhyTmEESKBtSvUvjbMTM_26gu5y.webp)
263
+ - [eBay MIND Patterns](https://ebay.gitbook.io/mindpatterns/navigation/link) — eBay MIND Patterns — Accessibility, Usage guidelines, Open source · [preview](https://component.gallery/_astro/UPp-NJBVDlo4haAFMxjzue1xSoGw3MGx7IWh2kbA9_Q_26VWud.webp)
264
+ - [Text link](https://playbook.ebay.com/design-system/components/text-link) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/5jnAj5pTnfVvLs3WfYyYyucMjflaApaLSv33fYoGxcw_Z27Ru1i.webp)
265
+ - [Elastic UI framework](https://eui.elastic.co/docs/components/navigation/link/) — Elastic UI framework · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/lc0XoFP8uSWVlFiDUbrduD1owM-_e9obEwoYMlHsc_Q_1V2UJA.webp)
266
+ - [Elisa Design System](https://designsystem.elisa.fi/9b207b2c3/p/53adbf-link) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/XeMT-DL_KXgt31KMUZWnalxBndupPW_uKgZpMEUYK4U_M4jgl.webp)
267
+ - [Flowbite](https://flowbite.com/docs/typography/links/) — Flowbite · Tailwind CSS — Open source, Code examples · [preview](https://component.gallery/_astro/xhOVU1WgbOLNLvRg33ayXEWsjjaJRmHieKUxXASMAzA_ZTz75U.webp)
268
+ - [Fluent UI](https://developer.microsoft.com/en-us/fluentui#/controls/web/link) — Fluent UI · React, Web Components, Mobile — Usage guidelines, Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/JileXSjUxdlaTBufVY8gNHPRmgsZ1o5_46oMXwbkMKE_Z1clyX5.webp)
269
+ - [Text link](https://f36.contentful.com/components/text-link) — Forma 36 · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/xZDzix2o1fGkYkF2cXrGqVPXTykapCkSBLFXmDu41iI_Z2cImij.webp)
270
+ - [Gestalt](https://gestalt.pinterest.systems/web/link) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/c0_3KBZcOlWX3qBnvHzr1T8m_Lrcscv6zWonKRtGx2Q_ZLSK5i.webp)
271
+ - [IconButtonLink](https://gestalt.pinterest.systems/web/iconbuttonlink) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/wkaIwAKbufiZ-8GqQSB22y-aiuVjInbjVfVr-2Y6UFI_Z1gvvtM.webp)
272
+ - [Link button](https://www.giffgaff.design/components/for-web/links/link-button/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/aLDqEEb9nO7ePP2evobpJOngrf1Cz6MMb0OVnemGUrk_29lSWM.webp)
273
+ - [giffgaff design system](https://www.giffgaff.design/components/for-web/links/links/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/qTPvojjFiTGDdi1q1PzK3WCjlqd8CK-pJolRoJiGMAM_ZKLHsv.webp)
274
+ - [Call to action link](https://gold.designsystemau.org/components/cta-link/) — GOLD Design System · React, Sass — Code examples, Usage guidelines, Accessibility, Open source, Unmaintained · [preview](https://component.gallery/_astro/P2j3EexLGhF4g0zdP1dRTb1Evti6PK15alcojQfUtr4_1RWpC8.webp)
275
+ - [Anchor](https://v2.grommet.io/anchor) — Grommet · React — Code examples, Open source · [preview](https://component.gallery/_astro/YTLh3sEXRaTZt2YaX5nTB1fXAhwvrjqV0J_l-MC2L_E_1jFGlg.webp)
276
+ - [Inline link](https://helios.hashicorp.design/components/link/inline) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Jm9T_slE8MyS7fcQZaIE6pZNMSozRvXy6Q5RxXOmtVs_GzT8u.webp)
277
+ - [Standalone link](https://helios.hashicorp.design/components/link/standalone) — Helios · Ember, Sass — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/v4_asJ6nBgXbYBVdek9ahoSiOp0Uxc5DbrpAKxzrj1g_1ecaOx.webp)
278
+ - [HeroUI](https://www.heroui.com/docs/components/link) — HeroUI · React, Tailwind CSS — Code examples, Open source · [preview](https://component.gallery/_astro/Fo5irmTGb2fAxW7y6ZFFKcZSGF5MBgPgSDISVTTcHJ4_6KJ5l.webp)
279
+ - [Instructure-UI](https://instructure.design/#Link) — Instructure-UI · React, CSS-in-JS — Code examples, Accessibility, Open source · [preview](https://component.gallery/_astro/O14tQssD4LKqWubk-Au2AsLI7C0cTxx4FaQMGSv_kBM_Z2gxnQH.webp)
280
+ - [Jøkul Designsystem](https://jokul.fremtind.no/komponenter/link) — Jøkul Designsystem · React, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/ISeDufSQcUvCtDAzPKAjPrVQ2oEJN8gcKADfyrALv3Y_1sbqkr.webp)
281
+ - [Morningstar Product System](https://design.morningstar.com/systems/product/components/link) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/U0snbnZaERODClTyD1h4QdwB0QfSx5ksYz4_cETF4m0_ZNE7o6.webp)
282
+ - [Links](https://protocol.mozilla.org/components/detail/links--default.html) — Mozilla Protocol · Handlebars, Sass — Usage guidelines, Open source · [preview](https://component.gallery/_astro/1pbfIM0aCAlctdTy1vXjvw56vtAjakFwi_6kmzyvvXI_Z1PPQTG.webp)
283
+ - [Nessie](https://design.ns.nl/4a05a30ad/p/525046-link) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/QsmsDmaRgOl2kpfaJj-75U9wPrFZ_mzgjuFU53hNdwI_MjazS.webp)
284
+ - [NewsKit](https://www.newskit.co.uk/components/link/) — NewsKit · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/6q-cMInmqbQ-8JBx1cMFokMPKLWqKpnOYcnCi5ymw44_1THLbr.webp)
285
+ - [Action link](https://service-manual.nhs.uk/design-system/components/action-link) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/WtAat9gv1IwtK06nUqI0yYx0670A7o5xQt9QkaOPQgk_Z10pB7u.webp)
286
+ - [Back link](https://service-manual.nhs.uk/design-system/components/back-link) — NHS Digital service manual · Nunjucks — Code examples, Usage guidelines, Research, Tone of voice, Open source · [preview](https://component.gallery/_astro/jvO6j6pQz4RtuJlZswu2juskTC_XD8Ll9VcCiYn0x_4_Z21hNkW.webp)
287
+ - [Text link](https://orbit.kiwi/components/textlink/) — Orbit · React, CSS-in-JS — Usage guidelines, Open source, Code examples, Tone of voice · [preview](https://component.gallery/_astro/arroBPh5rKvcmuG5wl6KPeAui-Mh_SUcHmokqE4D3dM_qMnmH.webp)
288
+ - [Pajamas](https://design.gitlab.com/components/link) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/pVQ4-Vp00zYEKi_CNJAIpM0JxOodLrSVGeg4uOve3nU_Z1IdYw9.webp)
289
+ - [Anchor](https://paste.twilio.design/components/anchor) — Paste · React, CSS-in-JS — Usage guidelines, Code examples, Tone of voice, Accessibility, Open source · [preview](https://component.gallery/_astro/zWVacp-ytNieL98ahXV2JEkkdLgT2WH0wpg999uwk3I_2l5pjX.webp)
290
+ - [Pharos](https://pharos.jstor.org/components/link) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/_mLnzZLIztXtLBit-6cIeE_f9dQQapefts66HBc4UgY_1C2F8x.webp)
291
+ - [Polaris](https://polaris.shopify.com/components/navigation/link) — Polaris · React — Code examples, Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/vT7bKUK-bOlp2Feu0EayB-tJ-dKlhLfKkYisKnJ53QI_Z37uId.webp)
292
+ - [Porsche Design System](https://designsystem.porsche.com/v3/components/link/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/gwBETOYaWqEfa4nDxlnhclntgda3QRc-pYw-Z520d7k_Z21pjSi.webp)
293
+ - [Link Pure](https://designsystem.porsche.com/v3/components/link-pure/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/ycGLmnv9s1j92AjYx3PLA3eogDxzSa1MqyQnZ0FwXXM_Zpcx5p.webp)
294
+ - [Link Tile](https://designsystem.porsche.com/v3/components/link-tile/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/arX9GwCeGRB6-IKgSPnv0prNQ23MZ1XhjKKWqlSkQv8_Z1EdxhD.webp)
295
+ - [Primer](https://primer.style/design/components/link) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/-XNDf_kV5ErOcZhI7q2kiZBXs8ncVzqy9KHp5szN9Zs_Z8xpl4.webp)
296
+ - [Purple3](https://design.herokai.com/purple3/docs/#links) — Purple3 · CSS — Code examples, Unmaintained · [preview](https://component.gallery/_astro/KbDrUaq_rPj2FCcA9qkzR0rYKD98dSRGqgWqHIHTvrs_hLLt3.webp)
297
+ - [Call to action](https://ux.redhat.com/elements/call-to-action/) — Red Hat design system · Web Components — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/fRj-VX0uow17o063x33MvB_rAPGgHj-5LetIo35HU_s_2hlm4H.webp)
298
+ - [Cta Link](https://components.ruter.as/#/Components/Navigation/CtaLink) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/wGxMi4ocA53q8r6JfmZ4Z6zhiLB-MmMUNEXoeWSFEzc_2iugXH.webp)
299
+ - [Text Link](https://components.ruter.as/#/Components/Navigation/TextLink) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/yMPFlN1ESeG4_Er6deu_ckEUAjU4fhPUenJBt1ApZO0_27zomP.webp)
300
+ - [Block Link](https://components.ruter.as/#/Components/Navigation/BlockLink) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/v1MUr-dvYMuHxbXcPdQSjNfxnfxknyFNC4OZNafdgw8_ZlvVwA.webp)
301
+ - [Sainsbury's Design System](https://design-systems.sainsburys.co.uk/components/link/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/rgucYxhp3vZXPFOVZZP-1aIMip1DgynvexyZeayrDIs_1fEcPu.webp)
302
+ - [Seeds](https://sproutsocial.com/seeds/components/link) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/1a8GLl6SJ5vnoiKNlFd2m-eVbYQDRPGb6pQALm8itkI_Z11Urbi.webp)
303
+ - [Text Link](https://seek-oss.github.io/seek-style-guide/text-link) — Seek style guide · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/GNj6cIGQJ42s6jY1gYa6c_AclnN2tKWfYurf1hJd1SI_18zKNG.webp)
304
+ - [Spectrum](https://spectrum.adobe.com/page/link/) — Spectrum · CSS, Web Components, React — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/234VjskgHuRCftXkj8abqME1VMh0v1HcXwFQMpuUHOA_ZDiFpT.webp)
305
+ - [Stacks](https://stackoverflow.design/product/components/links) — Stacks · Stimulus — Code examples, Usage guidelines, Tone of voice, Open source · [preview](https://component.gallery/_astro/q2KYcpXWOgnc4zY9v4jJb7v_15UojYxWsDJdScOVMyY_2mOXyH.webp)
306
+ - [SubZero](https://www.subzero.axis.bank.in/components/link) — SubZero — Accessibility issues · [preview](https://component.gallery/_astro/XHbtJ1vEdDAehg6vakCK7MDsVo5Tn2OqTcqyKcRW4II_1eDyPS.webp)
307
+ - [Thumbprint ](https://thumbprint.design/components/link/react/) — Thumbprint · React, Sass — Code examples, Open source · [preview](https://component.gallery/_astro/w3jq9LAMRarWq__7E52IX_a-kdAShSeSiEKvGdTZ96I_1q0QNT.webp)
308
+ - [Anchor link](https://ustyle.guide/pattern-library/components.html#anchor_links) — uStyle · Sass — Tone of voice, Code examples, Usage guidelines, Open source, Unmaintained · [preview](https://component.gallery/_astro/bnSA-rCl6ODbZAxFm48X0TlYCXUHL2jLAaBG6qRkxFo_AvH7D.webp)
309
+ - [Visa Product Design System](https://design.visa.com/components/link/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/Rggg1ZXiFngUdcJEwbUPqsg_s06QBOetSzlA9kCTRGY_Z1Frpy.webp)
310
+ - [W3C design system](https://design-system.w3.org/styles/links.html) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/MSJs75leUcnWHABSfFAyTr5ajgKmXvLniLT-_x7Semw_1lGUFM.webp)
311
+ - [Links](https://designsystem.tfwm.org.uk/components/links/) — West Midlands Network Design System · HTML, Nunjucks, Sass — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/ywePEVDPK3rRqBvXN5RD55fh7bji8LrqorqP_lYbqYY_tp4rb.webp)
312
+
313
+ ---
314
+
315
+ ## Segmented control
316
+
317
+ **Also known as:** Toggle button group
318
+
319
+ [Browse all 28 examples →](https://component.gallery/components/segmented-control/)
320
+
321
+ ### Design System Implementations
322
+
323
+ - [Segmented](https://ant.design/components/segmented) — Ant Design · React — Code examples, Accessibility issues, Open source · [preview](https://component.gallery/_astro/hkvgLbsugDsGVS8u-eLZIUIb9zxOw0SHzoeALvBnl3A_40pOE.webp)
324
+ - [Segmented Control](https://baseweb.design/components/segmented-control/) — Base Web · React, CSS-in-JS — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/K9Gn0OpPJlMwYjF7eKXyRSBsWl2c_Y9SXCH-RPID624_1fxKJY.webp)
325
+ - [Blueprint](https://blueprintjs.com/docs/#core/components/segmented-control) — Blueprint · React, Sass — Open source · [preview](https://component.gallery/_astro/w1LZ9zBejTb8y4lY2mXjjCfla51pNRB652bTVMU61Xo_oUGD.webp)
326
+ - [Content switcher](https://carbondesignsystem.com/components/content-switcher/usage) — Carbon Design System · React, Vanilla JS, Angular, Vue, Svelte, Web Components — Code examples, Usage guidelines, Open source · [preview](https://component.gallery/_astro/gnDlaB8fK5ovABO3mo4yoOV8GrRx3yyPEVgNkMRtBYY_Z13xPbD.webp)
327
+ - [Toggle button](https://cedar.rei.com/components/toggle-button) — Cedar · Vue, Sass, CSS Modules — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/bPHhCxK1QMkgfC_lQhoJJVxPGJQY1HAmh80eBgkjUzU_KDguq.webp)
328
+ - [Segmented Control](https://chakra-ui.com/docs/components/segmented-control) — Chakra UI · React, CSS-in-JS — Code examples, Open source · [preview](https://component.gallery/_astro/-p2fI65aKJI1LDPbwk2nACIGJSvEBL2Pv8057V-FlNM_1axx1U.webp)
329
+ - [Switch](https://design.talend.com/?path=/docs/form-switch--docs) — Coral · React — Code examples, Tone of voice, Open source · [preview](https://component.gallery/_astro/TEdvIqR4OB03GSyRe7_BPbqJ7FDbxcK3Nu8NiU8Vb4Y_Z2y9yJ.webp)
330
+ - [Segmented button](https://playbook.ebay.com/design-system/components/segmented-button) — eBay Playbook · HTML, React — Code examples · [preview](https://component.gallery/_astro/8fRw0w8Pss1BF2_eO90zuUlF59J7BRrnUMp3cT711Wo_1u7fA5.webp)
331
+ - [SelectGroup](https://designsystem.elisa.fi/9b207b2c3/p/70c277-selectgroup) — Elisa Design System · React — Usage guidelines, Code examples, Accessibility · [preview](https://component.gallery/_astro/70ByQiTs6d1jxrpsYfrJkwRCJeqzFiKpJTZYcegI2eg_Z11KUUw.webp)
332
+ - [Switch](https://vercel.com/geist/switch) — Geist Design System · React — Code examples · [preview](https://component.gallery/_astro/eZHJwvEmHWNz4TV-f7qN_fplqUcHBIEjEFshFyMPQ-s_3UTAk.webp)
333
+ - [SegmentedControl](https://gestalt.pinterest.systems/web/segmentedcontrol) — Gestalt · React, CSS — Code examples, Open source, Usage guidelines · [preview](https://component.gallery/_astro/aaNRuJJcC8dUW4fS6E3bbHG0X-82Hj6IzwQbjsIoDdA_Z1HsTos.webp)
334
+ - [Chunky buttons](https://www.giffgaff.design/components/for-web/form-inputs/chunky-buttons/) — giffgaff design system — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/yudoHHJ0FESH7hL0CKKgIjro3Ks-yXFGm5LAdiT8fi4_ZYJILG.webp)
335
+ - [Segmented Button](https://design.morningstar.com/systems/product/components/segmented-button?version=1.0.0&tab=design) — Morningstar Product System · Vue — Usage guidelines · [preview](https://component.gallery/_astro/5ABhNhKlG53nqUncmunNBhxsthKjrPCF101LxC1rS4Q_xiSSM.webp)
336
+ - [Radio Panel](https://design.ns.nl/4a05a30ad/p/600f53-radio-panel) — Nessie · Web Components, Tailwind CSS — Usage guidelines, Code examples · [preview](https://component.gallery/_astro/upVdUXJuAaUuYpM6RkMsgrIhUIHz_GfTcflzI0ebIaQ_11cbu1.webp)
337
+ - [Pajamas](https://design.gitlab.com/components/segmented-control) — Pajamas · Vue — Usage guidelines, Code examples, Open source · [preview](https://component.gallery/_astro/KU7vf8AS3HjRwjw3TTVP8Jd3UZgtczDpWGGUDKBw8Vc_Z1Pd5Lv.webp)
338
+ - [Toggle group](https://www.patternfly.org/components/toggle-group) — PatternFly · React, Sass — Tone of voice, Open source, Usage guidelines · [preview](https://component.gallery/_astro/SHLvpJkFNtc-Ozb0YC5NzaY_EcLaDkVCpLjBpqrXNwY_1uaqqN.webp)
339
+ - [Toggle button group](https://pharos.jstor.org/components/toggle-button-group) — Pharos · Web Components, Sass — Usage guidelines, Open source, Code examples, Accessibility, Tone of voice · [preview](https://component.gallery/_astro/44LRuGvUmxMWWeyVIzG2PQHeOpPRyzvBlqHLsis9ucs_Zfi9W3.webp)
340
+ - [Segmented Control](https://designsystem.porsche.com/v3/components/segmented-control/examples) — Porsche Design System · Web Components, Angular, React, Vue — Code examples, Open source · [preview](https://component.gallery/_astro/sQsOjhcVcEWXmDudXGOx2B4b4SMkkvcKh8DAcZRXnWw_ZKLAG8.webp)
341
+ - [Primer](https://primer.style/design/components/segmented-control) — Primer · React — Code examples, Open source · [preview](https://component.gallery/_astro/suRWbuudIXwGyKg-WVGNOe-PgD4SZ42jkO9D61WsqAc_1H7IWB.webp)
342
+ - [Button toggle](https://quasar.dev/vue-components/button-toggle) — Quasar Framework · Vue — Accessibility issues, Code examples, Open source · [preview](https://component.gallery/_astro/ueOyyEpa3Ske2LlekxCqkCOHPVJ4shcW8Ma0t7V-rq4_283CiH.webp)
343
+ - [Toggle group](https://radix-ui.com/primitives/docs/components/toggle-group) — Radix Primitives · React — Code examples, Open source · [preview](https://component.gallery/_astro/miQiIj4NjP9aJBgxnb3tlEm8ToLraQafCMpPO-HvpNU_1YAFFj.webp)
344
+ - [Radio Button Group](https://components.ruter.as/#/Components/Forms/RadioButtonGroup) — Ruter Components · React — Code examples, Unmaintained · [preview](https://component.gallery/_astro/0BUM9ZsU5CUpnGIrhu2P8EpDuDxd2V2FMVLZhMi0nAA_1R03ks.webp)
345
+ - [Toggle button](https://design-systems.sainsburys.co.uk/components/toggle-button/) — Sainsbury's Design System · React, Sass — Usage guidelines, Code examples, Tone of voice · [preview](https://component.gallery/_astro/GIXhcVEYrs8PNN--oNyaVWximr3s2jwu-MXsbRSqfrs_ZeS3cp.webp)
346
+ - [SEB Design Library](https://designlibrary.sebgroup.com/components/segmented-control/) — SEB Design Library · Sass, React, Angular — Code examples, Usage guidelines · [preview](https://component.gallery/_astro/tM-BYe66gkm6fYtl46KEUOvhgkYVEYCLsdCMM0zD7IQ_ZxxbgS.webp)
347
+ - [Segmented Control](https://sproutsocial.com/seeds/components/segmented-control) — Seeds · React — Code examples, Usage guidelines, Tone of voice · [preview](https://component.gallery/_astro/ANfY8c3YUClKrta9g_iyn7_kTSiPmvVuj8K-KryAX2I_ZhlIuz.webp)
348
+ - [Toggle button](https://design.visa.com/components/toggle-button/) — Visa Product Design System · Angular, React, CSS, Mobile — Code examples, Usage guidelines, Accessibility, Open source · [preview](https://component.gallery/_astro/5wknyv41E3ewD5Lhf6uhUB4DuMTAb2tZDbxQrMmEwJM_Z9vCtr.webp)
349
+ - [Segmented options](https://design-system.w3.org/styles/forms.html#segmented-options) — W3C design system · Sass, Vanilla JS — Code examples, Usage guidelines, Open source, Accessibility · [preview](https://component.gallery/_astro/EOTe5L2NhAwR9X6GBKq-M65NpADwwCmBNGO105B9Veg_1mH45B.webp)
350
+ - [Workday Canvas Design System](https://canvas.workday.com/components/buttons/segmented-control) — Workday Canvas Design System · React — Usage guidelines, Accessibility, Tone of voice, Open source · [preview](https://component.gallery/_astro/c5Pcsdfla4uw5Eao1OX2L9xZWOh3_UDLoDwNYySOCJw_nIR8a.webp)
351
+
352
+ ---
353
+
354
+ *Data from [component.gallery](https://component.gallery) by [Iain Bean](https://iainbean.com). 294 examples across 5 components.*