Svelte 5 component · machines-ui · Frame
ButtonMachine
A button drawn as a dashed frame with the label set in a block of the current accent. The label turns black or white to stay readable on whatever the accent is. Pass `href` and it renders a link.
Install
ButtonMachine is a Svelte 5 ASCII button machine component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.
pnpm add @fractaldesign/machines-uiImport
import '@fractaldesign/machines-ui/style.css';
import { ButtonMachine } from '@fractaldesign/machines-ui';Usage
<ButtonMachine onclick={() => console.log('run')}>Run</ButtonMachine><ButtonMachine href="/docs">Docs</ButtonMachine>Props
| Name | Type | Default |
|---|---|---|
href | string Makes it a link: an `<a>` with this address instead of a `<button>`. | — |
type | 'button' | 'submit' | 'reset' The `type` of the `<button>`. Not used when `href` is set. Default 'button'. | 'button' |
disabled | boolean Disables the `<button>`. Not used when `href` is set. Default false. | false |
onclick | (event: MouseEvent) => void Called when the button or link is clicked. | — |
class | string Extra classes on the outer element. | '' |
children | Snippet The label. | — |
Snippets
| Name | Type | Default |
|---|---|---|
default | unknown | — |
Related components
ButtonMachineOutline The quiet cousin of `ButtonMachine`: the same dashed frame with no block behind the label.Frame The dashed character frame every graph sits inside: a caption on the top edge, corner glyphs, and optional…FrameBody The content region inside a graph frame, with optional compact spacing for dense layouts.FrameRule A horizontal dashed rule that spans the frame, for separating sections inside a FrameBody.GraphArrow Dashed arrow between flow nodes. `stretch` spans the available row.GraphTick One glyph on a GraphTrack: flexes to fill, stays 1ch wide, centered.