upp-button-bar

A lightweight horizontal container that keeps action buttons in one line and distributes available width equally across all items. It is useful when a feature needs Ionic buttons but wants a reusable UPP layout wrapper and centralized spacing style.

When to Use

• You need 2+ action buttons on the same row.
• Every button should take the same width.
• You want one reusable style source instead of repeating ion-grid/ion-col patterns.

Demo

Source Code

HTML

<upp-button-bar>
    <upp-button-bar-item>
        <ion-button size="small" color="primary">Day</ion-button>
    </upp-button-bar-item>
    <upp-button-bar-item>
        <ion-button size="small" color="light">Week</ion-button>
    </upp-button-bar-item>
    <upp-button-bar-item>
        <ion-button size="small" color="light">Month</ion-button>
    </upp-button-bar-item>
</upp-button-bar>

TypeScript

// No required TypeScript code.
// Use Ionic button state as usual.

SCSS

/* Optional: custom spacing between items */
upp-button-bar {
    --upp-button-bar-gap: 8px;
}

API Reference

UppButtonBarComponent (upp-button-bar)

Property	Type	Default	Description
gap	string	'2px'	Space between items. Any CSS size is valid (2px, 0.5rem, etc.).

UppButtonBarItemComponent (upp-button-bar-item)

Projection slot for one item inside the bar.

• Each item expands with flex: 1, so all items use equal width.
• Child ion-button/button elements are forced to 100% width.