Button · Starbase

Playground

Blast off

variant size

Buttons start things. sb-button comes in five variants, three sizes, and renders a real <a> when given an href. Clicks bubble out of the shadow root, so any Datastar data-on:click just works.

Examples

Variants

Primary

Outline

Ghost

Abort

Blast off

<sb-button>Primary</sb-button>
<sb-button variant="outline">Outline</sb-button>
<sb-button variant="ghost">Ghost</sb-button>
<sb-button variant="danger">Abort</sb-button>
<sb-button variant="pixel" caret>Blast off</sb-button>

Sizes

Small

Medium

Large

<sb-button size="sm">Small</sb-button>
<sb-button size="md">Medium</sb-button>
<sb-button size="lg">Large</sb-button>

With Datastar

Local signals start with an underscore, so they stay in the browser and are never sent to the server.

Launches:

Reset

<div data-signals:_count="0">
  <sb-button data-on:click="$_count++">Launches: <span data-text="$_count"></span></sb-button>
  <sb-button variant="ghost" data-on:click="$_count = 0" data-attr:disabled="$_count === 0">Reset</sb-button>
</div>

Talking to the backend works the same way: data-on:click="@post('/launch')".

As a link

Read the Datastar docs

<sb-button href="https://data-star.dev" variant="outline" caret>Read the Datastar docs</sb-button>

Accessibility

A native <button> (or <a>) inside the shadow root does the work: keyboard focus, Enter and Space, and screen reader semantics. Disabled buttons are removed from the tab order.

Installation

Add Datastar with Rocket and the Starbase autoloader once per page, then use the tag. The autoloader imports each component the first time its tag appears, including tags added later by a Datastar morph.

<!-- Once per page: Datastar with Rocket, and the Starbase autoloader.
     It loads every <sb-…> component the first time its tag appears. -->
<script type="importmap">
  { "imports": { "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar-rocket.js" } }
</script>
<script type="module" src="https://rocket.libretto.ch/c/autoloader.js"></script>
<!-- Optional, no flash of undefined elements: class="sb-cloak" on <html>, and -->
<style>.sb-cloak :not(:defined) { visibility: hidden }</style>

<sb-button variant="pixel" size="lg" caret>Blast off</sb-button>

<!-- Or skip the autoloader and load just this component: -->
<!-- <script type="module" src="https://rocket.libretto.ch/c/button/button.js"></script> -->

API reference

Props

Attribute	Type	Default	Description
`variant`	"primary" \| "outline" \| "ghost" \| "pixel" \| "danger"	`"primary"`	Visual style.
`size`	"sm" \| "md" \| "lg"	`"md"`	Height and padding.
`href`	string	`""`	Render as a link to this URL.
`caret`	boolean	`false`	Show a trailing chevron.
`disabled`	boolean	`false`	Disable interaction.

Slots

Name	Description
`default`	The label.
`prefix`	An icon before the label.
`suffix`	An icon after the label.