Button Row
<wa-button-row>
Button rows align related actions while keeping primary and minor actions in predictable positions.
Examples
Primary action
Brand buttons are ordered after the other right-aligned actions.
Minor action
Give a minor action appearance="plain" to position it at the inline start, separated from the other actions.
Single action
A single action remains aligned to the inline end.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.
Import this component directly from the CDN:
import 'https://cdn.yoummday.com/packages/@yoummday/webawesome/0.5.1/dist/components/button-row/button-row.js';
After installing Web Awesome via npm, import this component:
import '@yoummday/webawesome/dist/components/button-row/button-row.js';
If you're self-hosting Web Awesome, import this component from your server:
import './webawesome/dist/components/button-row/button-row.js';
To import this component for React 18 or below, use the following code:
import WaButtonRow from '@yoummday/webawesome/dist/react/button-row/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | One or more <wa-button> elements to display in the button row. |
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
button-row |
The component's flex container. |
::part(button-row)
|
base |
The component's flex container, retained as a legacy alias. |
::part(base)
|
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.