Button Variants: Filled, Tonal, CheckButton, and Stubs

Compose Svelted’s button family follows the Material 3 button taxonomy. Three variants — Button, TonalButton, and CheckButton — are fully implemented with documented props and interactive behavior. Six additional variants (TextButton, IconButton, ButtonWithIcon, OutlinedButton, OutlinedButtonWithIcon, OutlinedIconButton) exist as placeholder stub files with no implementation yet. All fully-implemented variants share the same composable philosophy: slots accept any child content, Modifier handles layout, and ColorToken props keep colors tied to the active theme.

Implemented button variants

Button
TonalButton
CheckButton

Button is the primary filled button. It renders an elevated, solid-background button ideal for the single most important action on a screen.

Props

onClick

() => void

default:"() => {}"

Callback invoked when the user taps or clicks the button.

modifier

Modifier

default:"Modifier.empty()"

Controls layout, size, padding, and other inline styles.

color

ColorToken | string

default:"'primary'"

Background fill color. Accepts a ColorToken or a raw CSS color string.

onColor

ColorToken | string

default:"'onPrimary'"

Foreground (text/icon) color, intended to contrast with color.

shape

'none' | 'extraSmall' | 'small' | 'medium' | 'large'

default:"'large'"

Corner radius shape. Resolved against --md-sys-shape-{shape}.

elevation

'level0' | 'level1' | 'level2' | 'level3' | 'level4'

default:"'level1'"

Box-shadow elevation tier. Resolved against --md-sys-elevation-{elevation}.

Slot

Slot	Description
`default`	Button label, icon, or any inline content.

Examples

<script>
  import { Button, ColorScheme, Modifier } from '@danielito1996/compose-svelted';
</script>

<!-- Default primary button -->
<Button onClick={() => alert('Confirmed')}>
  Confirm
</Button>

<!-- Secondary color, full width -->
<Button
  onClick={() => alert('Secondary action')}
  color={ColorScheme.Secondary}
  onColor={ColorScheme.OnSecondary}
  modifier={Modifier.fillMaxWidth()}
>
  Secondary action
</Button>

<!-- Custom shape and elevation -->
<Button
  onClick={() => {}}
  shape="medium"
  elevation="level3"
>
  Elevated medium
</Button>

TonalButton is a filled tonal button — a softer alternative to the primary Button. It defaults to secondaryContainer / onSecondaryContainer colors and carries no elevation (level0), matching the M3 tonal button style.

Props

onClick

() => void

default:"() => {}"

Callback invoked on click.

modifier

Modifier

default:"Modifier.empty()"

Layout modifier.

color

ColorToken | string

default:"'secondaryContainer'"

Button background. Defaults to secondaryContainer for the characteristic tonal surface.

onColor

ColorToken | string

default:"'onSecondaryContainer'"

Foreground color inside the button.

shape

'none' | 'extraSmall' | 'small' | 'medium' | 'large'

default:"'large'"

Corner radius shape token.

elevation

'level0' | 'level1' | 'level2' | 'level3' | 'level4'

default:"'level0'"

Elevation. Tonal buttons are flat by default.

Slot

Slot	Description
`default`	Button content.

Example

<script>
  import { TonalButton, ColorScheme } from '@danielito1996/compose-svelted';
</script>

<TonalButton onClick={() => console.log('tonal clicked')}>
  Save draft
</TonalButton>

<!-- Tertiary tonal variant -->
<TonalButton
  onClick={() => {}}
  color={ColorScheme.Tertiary}
  onColor={ColorScheme.OnTertiary}
>
  Tertiary action
</TonalButton>

CheckButton is a toggleable button that doubles as a checkbox with rich slot content. It maintains a checked boolean state, animating a visual checkmark indicator with AnimatedVisibility when the state changes. The background and foreground colors flip between primary/onPrimary (checked) and surfaceVariant/onSurface (unchecked).

Props

checked

boolean

required

Current checked state. This is a controlled prop — you must manage state externally and pass it in.

onCheckedChange

(value: boolean) => void

required

Called with the new boolean value each time the user toggles the button.

enabled

boolean

default:"true"

When false the button is non-interactive and its cursor changes to default.

shape

Shape

default:"RoundedCornerShape(8)"

A Shape instance controlling the border radius. Defaults to RoundedCornerShape(8) (8 px all corners).

modifier

Modifier

default:"Modifier.empty()"

Layout modifier.

Slot

Slot	Description
`default`	Label text or any inline content displayed next to the check indicator.

Example

<script>
  import {
    CheckButton, Column, Arrangement, Modifier
  } from '@danielito1996/compose-svelted';

  let acceptTerms = false;
  let subscribeNewsletter = true;
</script>

<Column verticalArrangement={Arrangement.spacedBy(12)}>
  <CheckButton
    checked={acceptTerms}
    onCheckedChange={(v) => acceptTerms = v}
  >
    I accept the terms and conditions
  </CheckButton>

  <CheckButton
    checked={subscribeNewsletter}
    onCheckedChange={(v) => subscribeNewsletter = v}
  >
    Subscribe to newsletter
  </CheckButton>

  <CheckButton
    checked={false}
    onCheckedChange={() => {}}
    enabled={false}
  >
    Disabled option
  </CheckButton>
</Column>

Placeholder stub variants

The following six button components exist as empty files in the source repository. They have no implementation yet and therefore have no documented props. Do not rely on them in production — they are reserved for future releases.

Component	File	Status
`TextButton`	`buttons/TextButton.svelte`	Placeholder stub — 0 bytes
`IconButton`	`buttons/IconButton.svelte`	Placeholder stub — 0 bytes
`ButtonWithIcon`	`buttons/ButtonWithIcon.svelte`	Placeholder stub — 0 bytes
`OutlinedButton`	`buttons/OutlinedButton.svelte`	Placeholder stub — 0 bytes
`OutlinedButtonWithIcon`	`buttons/OutlinedButtonWithIcon.svelte`	Placeholder stub — 0 bytes
`OutlinedIconButton`	`buttons/OutlinedIconButton.svelte`	Placeholder stub — 0 bytes

These stub components contain no Svelte script, markup, or styles. Importing them will produce an empty element with no behavior. Props listed in any earlier version of this documentation for these variants were inaccurate and have been removed.

Combining implemented variants

A typical action bar uses multiple button types in a single Row to express a clear hierarchy: a primary Button for the main action, a TonalButton for a secondary action, and a CheckButton to gate submission behind an agreement toggle.

<script>
  import {
    Row, Column, Button, TonalButton,
    CheckButton, Arrangement, Alignment, Modifier
  } from '@danielito1996/compose-svelted';

  let agreed = false;
</script>

<Column
  modifier={Modifier.padding(24)}
  verticalArrangement={Arrangement.spacedBy(16)}
>
  <!-- Agreement toggle -->
  <CheckButton
    checked={agreed}
    onCheckedChange={(v) => agreed = v}
  >
    I agree to the privacy policy
  </CheckButton>

  <!-- Action row -->
  <Row
    horizontalArrangement={Arrangement.spacedBy(8)}
    verticalAlignment={Alignment.CenterVertically}
  >
    <Button onClick={() => console.log('submit')} modifier={Modifier.weight(1)}>
      Submit
    </Button>

    <TonalButton onClick={() => console.log('save draft')}>
      Save draft
    </TonalButton>
  </Row>
</Column>

Button and TonalButton accept any Svelte content in their default slot. You can freely nest Icon, Text, Row, or even another Surface inside a button to build fully custom appearances while keeping the interaction semantics.

Get Started

Core Concepts

Layout Components

UI Components

Motion

Navigation

Examples

Button Variants: Filled, Tonal, CheckButton, and Stubs

Implemented button variants

Props

Slot

Examples

Props

Slot

Example

Props

Slot

Example

Placeholder stub variants

Combining implemented variants

Build docs developers (and LLMs) love

Get Started

Core Concepts

Layout Components

UI Components

Motion

Navigation

Examples

Documentation Index

​Implemented button variants

​Props

​Slot

​Examples

​Props

​Slot

​Example

​Props

​Slot

​Example

​Placeholder stub variants

​Combining implemented variants

Build docs developers (and LLMs) love

Implemented button variants

Props

Slot

Examples

Props

Slot

Example

Props

Slot

Example

Placeholder stub variants

Combining implemented variants