How should it look?

Most versions of this component have a softer look then we have. We use primary buttons that take a lot of attention. I suggest we make a softer version or swap our primary version with the soft. If we decide to have both we need clear documentation for when they are used.

We also need to find out how to indicate what element is selected. For now we use border radius to indicate this. But remember that if we choose to go for only the filter version. The view also should be a part of the total indication of what is selected.

• Should we have a primary and secondary version of the togglegroup?

How to move forward

Changes to our current version

• Border-radius added to all corners of button.
  •  Today our Togglegroup use border-radius-md This token have a max value of 8px I propose that we change this to border-radius-default this can be anything up to 9999px NB: This is a breaking change, needs to be looked into before doing! But I see no reason for us to block this kind of look on this component.

• Button should overlay the border. This is only a design choice to give it a "cleaner" look
• Textcolor set to color-text-default with regular font-weight on unselected
• Selected elements have medium font-weight

New variant: Secondary

Inspired by our secondary button, this variant can be used if you do not want the primary button. We saw that in many designs the "heavyness" of a primary button would steal attention from the primary task. And it could be hard to balance this component in designs. This version has an outline instead of a fill.

How to fix

There are two ways to get this component in your file. One is build the variants yourself or can download the new community file and copy them over.

Method number 1 - Copy 🖨️

This method requires you to test a new plugin we made that will link the component to your local library both variables and subcomponents (instances)

1. Download a new community file. Find the Togglegroup page and select both the Togglegroup component and the base component in the bottom of the section.

2. Copy and paste them into your component library. Check that the base components inside Togglegroup actually are connected to the base components you copied in. (Right click, main component -> go to main component) Check on both icon and normal Togglegroup.

Skjermopptak.2025-09-29.kl.07.53.15.mov

3. The component will be connected to variables that are stored in the community file that we just downloaded and the instances that we use in the component (Button is used as the base for the elements) will also be connected to the community file. This will cause problems. We have made a plugin to solve this issue. Simple variable swapper(Github) Follow the guide on the readme on how to install the plugin. Do the base components first, then the main components.

Skjermopptak.2025-09-30.kl.17.02.21.mov

NB! All the icons in the file are connected to our local version of Aksel Icon library. I recommend that you download your own local version (or other icon library) and use the Figma function swap library in your component library. This will remove some issues you might get in the future.

4. You need to do this on both ToggleGroups (icon and normal). Remember to do the base components before you do the main component. To check if you have gotten all the variables. Check the modes. Here is a screenshot where it is wrong:

As you can see "Designsystemet - core UI Kit" is referencing the community file i downloaded. We only want to see modes that are "Created in this file". An example on how we want it to look in the next screenshot. If you still get references to a wrong mode it might be that the icons in you component library is still connected to our icon file. Use Swap library to swap them out with local icons.

5. Now all my base components and variables are connected correctly to my file. There are now two choices. I can delete the Togglegroup that already exist in my file. This might be the best if the library hasent been published or used by that many. Or we can try to expand on the component that already exist in my file. If you choose the first option you are done. 🎉 The next steps are about how to implement the secondary variant into you existing component.

This video here is me doing all the steps beneath here. Hope this helps 😸

Skjermopptak.2025-10-01.kl.08.28.44.mov

6. Now we have to cut out the secondary base components and paste them into the original component set. Here I have placed them side by side and marked the correct variants

cmd-x select the other component and cmd-v Should look something like this:

Now arrange them how you want them.

7. If you select the whole group you can see that there are an error with the settings. We need add the variant property for variant. And give the primary version the primary name. It should look something like this:

Now lets do the same with the Togglegroup It should look like this:

8. Now you might notice that they look kind of weird in my screenshots. In this example I have "pilled" form buttons. And the primary variants are not pilled form. We did some changes to the exising toggle group. Here are the changes you need to do.

Select all the button base components inside the .Togglegroup.button base component. Like this:

Set border radius to default

Set the text color for the default variants from text-subtle to text-default.

Set the font-weight for the default and hover variants to regular

9. We need to do some changes to the Togglegroup itself as well.
   The main version should use main-border-default color and main-surface-default

Both variants should use border-radius default

10. You might get a bug as I did here. The button should have a pilled form after I did the changes on the base component. This means that it has been overwritten. Lets see all of our base buttons in this component. Turn on the fifth and sixth in the right panel when the whole component is selected

Now we need to reset the instances. When we do you can see that it breaks the component. Just go down to width and set it to fill. (The Togglegroup with test written on all buttons is there to see that the text overrides are kept. This is important as it could break all use of the Togglegroup. Always be careful when reseting instances in a component. In this case it worked as excpected and "test" was not lost when we did this.)

Skjermopptak.2025-09-29.kl.08.54.53.mov

Now you can clean up the mess and enjoy your new Togglegroup 😮‍💨