Skip to content

Group

Group common ui components such as Button, Badge or Control together.

View Source 

Usage

css
@import "winduum/src/ui/group/index.css" layer(components);

Variants

  • default 

Tokens

  • vertical 

Examples

Button Group

html
<div class="ui-group">
    <button class="ui-btn">Button</button>
    <button class="ui-btn">Button</button>
    <button class="ui-btn">Button</button>
</div>
<div class="ui-group">
    <button class="ui-btn outline">Button</button>
    <button class="ui-btn outline">Button</button>
    <button class="ui-btn outline">Button</button>
</div>
<div class="ui-group">
    <button class="ui-btn muted">Button</button>
    <button class="ui-btn muted">Button</button>
    <button class="ui-btn muted">Button</button>
</div>

Badge Group

html
<div class="ui-group">
    <div class="ui-badge">Badge</div>
    <div class="ui-badge">Badge</div>
    <div class="ui-badge">Badge</div>
</div>
<div class="ui-group">
    <div class="ui-badge bordered">Badge</div>
    <div class="ui-badge bordered">Badge</div>
    <div class="ui-badge bordered">Badge</div>
</div>
<div class="ui-group">
    <div class="ui-badge muted">Badge</div>
    <div class="ui-badge muted">Badge</div>
    <div class="ui-badge muted">Badge</div>
</div>
<div class="ui-group">
    <div class="ui-badge bg-gray-200 text-dark">
        <span>npm</span>
    </div>
    <div class="ui-badge bg-info">
        <span>7.1.2</span>
    </div>
</div>

Control Group

html
<div class="ui-group">
    <div class="ui-control bg-body-secondary w-[--ui-control-height] flex-center justify-center">
        @
    </div>
    <div class="ui-control">
        <input type="tel" required>
    </div>
    <button class="ui-btn">Button</button>
</div>

Vertical Group

html
<div class="ui-group vertical">
    <a role="button" class="ui-btn">Link</a>
    <button type="submit" class="ui-btn">Button</button>
    <input type="button" value="Input" class="ui-btn" />
    <input type="submit" value="Submit" class="ui-btn" />
    <input type="radio" aria-label="Radio" class="ui-btn" />
    <input type="checkbox" aria-label="Checkbox" class="ui-btn" />
    <input type="reset" value="Reset" class="ui-btn" />
</div>
html
<div class="ui-group vertical">
    <div class="ui-control">
        <input type="text" placeholder="1234 1234 1234 1234" required>
    </div>
    <div class="ui-group">
        <div class="ui-control">
            <input type="text" placeholder="MM/YY" required>
        </div>
        <div class="ui-control">
            <input type="text" placeholder="CVC" required>
        </div>
    </div>
</div>

Released under the MIT License.