Layout

StickyActions

A form action bar pinned to the bottom of a scrolling container, with safe-area and virtual keyboard support.

<script>
  import { StickyActions, Button } from "@codeatlasdev/ui";
</script>

<StickyActions show={dirty}>
  <Button variant="ghost">Cancel</Button>
  <Button variant="filled">Save</Button>
</StickyActions>

Place it as the last child of the element that scrolls. On screens narrower than 900px it sticks to the bottom edge with the --ca-glass-bg fill (blurred only under the glass and frosted styles), respects the home-indicator inset (--ca-safe-bottom) and rises with the virtual keyboard. From 900px up it becomes a plain inline row without chrome.

#188

End aligned

Buttons sit on the right. The bar only renders while the form is dirty (show).

Name

Long content…

Reference #188 · Pick in the gallery

Code

<script lang="ts">
  import { StickyActions, Button, TextField, Stack } from '@codeatlasdev/ui';

  let name = $state('');
  const dirty = $derived(name.length > 0);
</script>

<div class="scroller">
  <Stack gap="4">
    <TextField label="Name" bind:value={name} placeholder="Type to reveal the bar" />
    <div class="filler">Long content…</div>
  </Stack>
  <StickyActions show={dirty}>
    <Button variant="ghost" onclick={() => (name = '')}>Cancel</Button>
    <Button variant="filled">Save</Button>
  </StickyActions>
</div>

<style>
  .scroller { width: 100%; max-height: 280px; overflow-y: auto; padding: 0 var(--ca-space-4); }
  .filler { height: 320px; color: var(--ca-text-secondary); }
</style>

#189

Stretch

On touch screens the primary button fills the width and the ghost button stays compact.

Long content…

Reference #189 · Pick in the gallery

Code

<script lang="ts">
  import { StickyActions, Button } from '@codeatlasdev/ui';
</script>

<div class="scroller">
  <div class="filler">Long content…</div>
  <StickyActions align="stretch">
    <Button variant="ghost">Back</Button>
    <Button variant="filled">Continue</Button>
  </StickyActions>
</div>

<style>
  .scroller { width: 100%; max-height: 280px; overflow-y: auto; padding: 0 var(--ca-space-4); }
  .filler { height: 320px; color: var(--ca-text-secondary); }
</style>

Props

Prop	Type	Default	Description
`children`	`Snippet`	–	The buttons of the bar.
`align`	`'end' \| 'stretch'`	`'end'`	'end' packs the buttons to the right. 'stretch' makes the buttons fill the width on touch screens.
`show`	`boolean`	`true`	Renders the bar only while there is something to confirm.
`class`	`string`	`''`	Extra class names.