# Layout Footer

## Usage

Bottom bar for action bars, pagination, and status bars.

```ts
import { LayoutFooter } from '@astryx-vue/core/Layout'
```

`LayoutFooter` is the fixed bottom region of a `Layout`. The content above it scrolls, the footer does not, so a bar of buttons, a page count, or a status line stays in place.

`height` is a number of pixels or any CSS length. `padding` sets the region inset. `hasDivider` draws the top rule; leave it out and the footer follows `defaultHasDividers` on the parent `Layout`.

```vue
<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { Layout, LayoutContent, LayoutFooter } from '@astryx-vue/core/Layout'
import { HStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <Layout>
    <LayoutContent>
      Order details.
    </LayoutContent>
    <template #footer>
      <LayoutFooter has-divider>
        <HStack :gap="2" h-align="end">
          <Button label="Cancel" variant="secondary" />
          <Button label="Save" variant="primary" />
        </HStack>
      </LayoutFooter>
    </template>
  </Layout>
</template>
```

## Examples

Common configurations, variations, and states.

### Actions

A fixed footer with end-aligned action buttons below scrollable content. Use LayoutFooter inside Layout for persistent actions like Save and Cancel.

```vue
<script setup lang="ts">
import { Button } from '@astryx-vue/core/Button'
import { Card } from '@astryx-vue/core/Card'
import { Layout, LayoutContent, LayoutFooter } from '@astryx-vue/core/Layout'
import { HStack } from '@astryx-vue/core/Stack'
</script>

<template>
  <Layout>
    <LayoutContent>
      <Card variant="muted" />
    </LayoutContent>
    <template #footer>
      <LayoutFooter has-divider>
        <HStack :gap="2" h-align="end">
          <Button label="Cancel" variant="secondary" />
          <Button label="Save" variant="primary" />
        </HStack>
      </LayoutFooter>
    </template>
  </Layout>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `hasDivider` | `boolean` | — | Draws a rule along the top edge. When it is not set, `defaultHasDividers` on the parent `Layout` decides, and `false` is the last fallback. |
| `height` | `number \| string` | — | Footer height. Numbers are pixels, strings are used as they are. |
| `label` | `string` | — | Accessible name for the landmark element. |
| `padding` | `SpacingStep` | — | Internal padding using the spacing scale. `0` lets the content manage its own inset. |
| `role` | `string` | — | ARIA landmark role. |

`SpacingStep` accepts these values:

```ts
type SpacingStep = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10
```

## Slots

- `default`: the footer content.

## Template ref

`LayoutFooter` exposes `element`.
Its type is `HTMLDivElement | null`.

## Native attributes

The root element receives HTML attributes, `aria-*` attributes, `data-*` attributes, `class`, and `style`. `class` is merged with the component's own classes.