Home›Docs›Basic›Group Button

Group Button

Last updated: 1 month ago

Category: Basic

Button groups are a form of tab headers that have been integrated into the Tab component module. Since they are built with CSS+HTML, they can be used anywhere in the webpage body and can also be packaged and referenced by other custom components or modules.

Group Page1 month ago Group Flex1 month ago Group Button1 month ago

Basic Usage

Create button groups by wrapping multiple <oc-btn> components with _group-btn class:

Output
HTML

The button is not an A tag

Japan South Korea Germany France

The button is an A tag

Japan South Korea Germany France
```
                
                
            
```

Button States

Three button states available:

Regular (default)
Selected (selected attribute)
Disabled (disabled attribute)

Output
HTML

The button is not an A tag

Japan South Korea Germany France

The button is an A tag

Japan South Korea Germany France
```
                
                
            
```

Themed Buttons

Apply color themes using theme attribute:

Single theme (consistent color)
Multiple themes (different colors per button)

Output
HTML

Single theme

Japan South Korea Germany France

Multiple theme

Japan South Korea Germany France
```
                
                
            
```

Divider Lines

Applying the theme attribute to buttons may cause their background colors to blend together. To add visual separation between buttons, use the dividable attribute on the _group-btn node.

Output
HTML

Japan South Korea Germany France

Japan South Korea Germany France

Japan South Korea Germany France
```
                
                
            
```

Custom Border Radius

The first and last buttons in a button group feature rounded corners, which can be customized via the CSS variable --_group-r in the button group's styles.