Svelte 5 component · machines-ui · Frame
ButtonMachineOutline
The quiet cousin of `ButtonMachine`: the same dashed frame with no block behind the label. On hover the frame and the label take the current accent. Pass `href` and it renders a link.
Install
ButtonMachineOutline is a Svelte 5 ASCII button machine outline 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 { ButtonMachineOutline } from '@fractaldesign/machines-ui';Usage
<ButtonMachineOutline onclick={() => console.log('open')}>Open</ButtonMachineOutline><ButtonMachineOutline href="/docs/examples">Examples</ButtonMachineOutline>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
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.GraphTrack Horizontal track that spans the frame.