Array of links/buttons

Everyone else is suggesting the "Tabs" pattern which uses buttons to simulate this. However, depending on what you're trying to do, the Tag component actually might be better. The style is more similar to what you have in your image, and there is more flexibility for formatting.

Basically the difference for them is:

• Buttons (Tabs pattern) are useful when you have some kind of interaction you want to do, such as changing the view of the page or submitting a form
• Tags are useful to designate attributes or characteristics. They aren't usually for interaction, but they are good at categorizing properties in a user interface.

Everyone else is suggesting the "Tabs" pattern which uses buttons to simulate this. However, depending on what you're trying to do, the Tag component actually might be better. The style is more similar to what you have in your image, and there is more flexibility for formatting.

Basically the difference for them is:

• Buttons (Tabs pattern) are useful when you have some kind of interaction you want to do, such as changing the view of the page or submitting a form
• Tags are useful to designate attributes or characteristics. They aren't usually for interaction, but they are good at categorizing properties in a user interface.

Buttons I cannot take because buttons has a default behavior of taking label as capital case, which should not happen.

Tabs pattern will not work because these values should be dynamic. Eg: Test1 will show group of columns, test 2 should group another group of columns...etc.

tags will not work, because those should be clickable.

ak0642 said:

Tabs pattern will not work because these values should be dynamic. Eg: Test1 will show group of columns, test 2 should group another group of columns...etc.

Why won't this work? I mean you have to adapt the tabs pattern to what you need, but there's no reason this can't be dynamic if you're using the rich text or the card options.

Also if at all possible, in the future please try to provide any context like this when you make your original post - that can help us provide you a solution more quickly

ak0642 said:

taking label as capital case, which should not happen.

This can be done. You need to use the below format. I didn't simplify this. Just copying it from here and creating a button widget. Refer the link and redo the code  according to your requirement.

A code block given by amiteshsin for the confirmation message

a!buttonWidget(
  label: a!localVariables(
    local!lRange: 120302 - 97,
    local!uRange: 120276 - 65,
    joinarray(
      char(
        a!forEach(
          items: code("box man"),
          expression: a!match(
            value: fv!item,
            whenTrue: and(fv!value > 96, fv!value < 123, ),
            then: fv!value + local!lRange,
            whenTrue: and(fv!value > 64, fv!value < 91, ),
            then: fv!value + local!uRange,
            default: fv!value
          )
        )
      ),
      ""
    )
  ),
  
)

You can do it in other ways if not buttons. Just need to tell us the requirement more clearly.