Yoummday Light Light Dark System

Button Row

<sl-button-row> | SlButtonRow
Since 3.0.1 experimental

Button rows can be used to group related buttons, sort and position them in a row.

Delete Cancel Save 
<sl-button-row>
  <sl-button variant="text-inline">Delete</sl-button>
  <sl-button>Cancel</sl-button>
  <sl-button variant="primary">Save</sl-button>
</sl-button-row>

import SlButton from '@yoummday/ymmd-shoelace/dist/react/button';
import SlButtonRow from '@yoummday/ymmd-shoelace/dist/react/button-row';

const App = () => (
  <SlButtonRow>
    <SlButton>Delete</SlButton>
    <SlButton>Cancel</SlButton>
    <SlButton>Save</SlButton>
  </SlButtonRow>
);

Examples

Single primary button

A single button that’s positioned to the right.

Close 
<sl-button-row>
  <sl-button variant="primary">Close</sl-button>
</sl-button-row>

Primary and secondary button(s)

N buttons that are all positioned to the right, while the primary button always gets displayed furthest to the right.

Cancel Save 
<sl-button-row>
  <sl-button>Cancel</sl-button>
  <sl-button variant="primary">Save</sl-button>
</sl-button-row>

Primary, secondary button and some minor action to the left

Use text-inline-buttons for any minor actions. They will be positioned to the left.

Delete Cancel Save 
<sl-button-row>
  <sl-button variant="text-inline">Delete</sl-button>
  <sl-button>Cancel</sl-button>
  <sl-button variant="primary">Save</sl-button>
</sl-button-row>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag:

<script type="module" src="https://v3-1-0.yoummday-theme.pages.dev/components/button-row/button-row.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://v3-1-0.yoummday-theme.pages.dev/components/button-row/button-row.js';

To import this component using a bundler:

import '@yoummday/ymmd-shoelace/dist/components/button-row/button-row.js';

To import this component as a React component:

import SlButtonRow from '@yoummday/ymmd-shoelace/dist/react/button-row';

Slots

Name Description
(default) One or more <sl-button> elements to display in the button row.

Learn more about using slots.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.