Install
Installing or signing in to a tool with one press: the button, the progress with the last line of output and the time, and the command folded away. Try the second button to see a failure.
- InstallButton
- InstallDetails
- InstallProgress
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, Install
Dark theme, Install
High contrast theme, Install
UsageLink to the section Usage
import { InstallButton, InstallDetails, InstallProgress } from '@skribly/ui/ops'<InstallButton isPending={running} pendingChildren={t('install.running')} pendingLabel={t('install.running')}
isInstalled={installed} installedLabel={t('install.done', { name })} onPress={install}>{t('install.do', { name })}</InstallButton>
<InstallProgress label={t('install.running')} state={state} line={lastLine} startedAt={started}
doneLabel={t('install.done', { name })} failedLabel={t('install.failed', { code })} />
<InstallDetails summary={t('common.details')} command={plan.command}
copy={{ label: t('common.copy'), copiedLabel: t('common.copied'), failedLabel: t('common.copyFailed') }} />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
- The button keeps focus while pending and says so; once installed it becomes a check and a word.
- The progress bar is named, the output line and the clock are not live so they never chatter, and the outcome is: success politely, failure assertively, both with an icon and words that stay on screen.
- The details toggle says whether it is open, and the command wraps in its box.
This demo runs through axe in all three themes on every test run. See what the tests check.