ComposeBar

The compose files of a project with their commands. One command runs at a time, and Down asks first. Pick it above a list of containers.

ComposeBar

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ComposeBar

Compose in this project

compose.yamlProject shop
deploy/compose.test.yamlProject shop-test

Compose in a project with no file

No compose file in this project. Add compose.yaml to manage its services here.

Dark theme, ComposeBar

Compose in this project

compose.yamlProject shop
deploy/compose.test.yamlProject shop-test

Compose in a project with no file

No compose file in this project. Add compose.yaml to manage its services here.

High contrast theme, ComposeBar

Compose in this project

compose.yamlProject shop
deploy/compose.test.yamlProject shop-test

Compose in a project with no file

No compose file in this project. Add compose.yaml to manage its services here.

UsageLink to the section Usage

tsx

import { ComposeBar } from '@skribly/ui/ops'

tsx

<ComposeBar title={t('docker.compose')} files={files} actions={[
    { id: 'up', label: 'Up', icon: <Play aria-hidden />, variant: 'primary' },
    { id: 'down', label: 'Down', variant: 'danger', confirm: { title: t('docker.downTitle'),
      body: t('docker.downBody'), confirmLabel: t('docker.down'), cancelLabel: t('common.cancel') } }
  ]} onAction={run} pending={pending} pendingLabel={t('common.running')} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A section named by its heading.
The buttons of each file are a group named by the file, so "Up" is never ambiguous.
The running button says it is pending and the others wait.
Down opens an alert dialog with focus on Cancel.
Buttons wrap under the file name on a narrow card.

This demo runs through axe in all three themes on every test run. See what the tests check.