RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Not Needed

Try in Cursor

Section Footer

A standardized footer section with customizable padding, divider, and size options.

Default

The default footer with horizontal, top, and bottom padding applied.

<template>
  <HLSectionFooter id="footer-1">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-1" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Padding

Toggle individual padding sides with the horizontalPadding, topPadding, and bottomPadding props (all default to true).

Without top padding

Disables the footer's top padding via :topPadding="false".

<template>
  <HLSectionFooter :topPadding="false" id="footer-2">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-2" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Without bottom padding

Disables the footer's bottom padding via :bottomPadding="false".

<template>
  <HLSectionFooter :bottomPadding="false" id="footer-3">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-3" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Without top and bottom padding

Disables both top and bottom padding via :topPadding="false" and :bottomPadding="false".

<template>
  <HLSectionFooter :topPadding="false" :bottomPadding="false" id="footer-4">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-4" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Without Horizontal padding

Disables the footer's horizontal padding via :horizontalPadding="false".

<template>
  <HLSectionFooter :horizontalPadding="false" id="footer-5">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-5" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

With divider

Shows a divider line above the footer content via :divider="true".

<template>
  <HLSectionFooter :divider="true" id="footer-6">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-6" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Actions on the Left

Aligns the footer buttons to the left using a justify="start" footer item.

<template>
  <HLSectionFooter id="footer-7">
    <HLSectionFooterItem justify="start">
      <div style="display:flex;gap:12px;">
        <HLButton size="xs" id="btn-7">Learn more</HLButton>
        <HLButton size="xs" id="btn-8">Skip</HLButton>
      </div>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end"></HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

Actions on the Right

Aligns the footer buttons to the right using a justify="end" footer item.

<template>
  <HLSectionFooter id="footer-8">
    <HLSectionFooterItem justify="end">
      <div style="display:flex;gap:12px;">
        <HLButton id="btn-9">Learn more</HLButton>
        <HLButton id="btn-10">Skip</HLButton>
      </div>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

All sizes

Compares the sm, md, and lg footer sizes.

<template>
  <HLSectionFooter size="sm" id="footer-13">
    <HLSectionFooterItem justify="start">
      <HLButton size="3xs" id="btn-12" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
  <br />
  <br />
  <HLSectionFooter size="md" id="footer-14">
    <HLSectionFooterItem justify="start">
      <HLButton size="2xs" id="btn-13" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
  <br />
  <br />
  <HLSectionFooter size="lg" id="footer-15">
    <HLSectionFooterItem justify="start">
      <HLButton size="sm" id="btn-14" variant="text" link>Learn more</HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" variant="ghost"> Tertiary </HLButton>
      <HLButton id="secondary" variant="secondary"> Secondary </HLButton>
      <HLButton id="primary" variant="primary" color="blue"> Primary </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'
</script>

With Custom Button Sizes

Uses HLText inside each button to render custom-sized, semibold button labels.

<template>
  <HLSectionFooter id="footer-1">
    <HLSectionFooterItem justify="start">
      <HLButton size="2xs" id="btn-1" variant="text" link>
        <HLText size="2xl" weight="semibold">Learn more</HLText>
      </HLButton>
    </HLSectionFooterItem>
    <HLSectionFooterItem justify="end">
      <HLButton id="ghost" size="2xs" variant="ghost">
        <HLText size="2xl" weight="semibold">Tertiary </HLText>
      </HLButton>
      <HLButton id="secondary" size="2xs" variant="secondary">
        <HLText size="2xl" weight="semibold">Secondary </HLText>
      </HLButton>
      <HLButton id="primary" size="2xs" variant="primary" color="blue">
        <HLText size="2xl" weight="semibold">Primary </HLText>
      </HLButton>
    </HLSectionFooterItem>
  </HLSectionFooter>
</template>

<script setup>
import { HLSectionFooter, HLButton, HLSectionFooterItem, HLText } from '@platform-ui/highrise'
</script>

Accessibility

• Provide aria-label describing what the footer actions affect (e.g., “Form actions”).
• Reference disclaimers or totals via aria-describedby so they read alongside the controls.

Imports

import { HLSectionFooter, HLButton, HLSectionFooterItem } from '@platform-ui/highrise'

Props

Section Footer

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
horizontalPadding	boolean	true	Enable horizontal padding
topPadding	boolean	true	Enable top padding
bottomPadding	boolean	true	Enable bottom padding
divider	boolean	false	Show divider line
size	'sm' | 'md' | 'lg'	'lg'	Size of the footer

Section Footer Item

Name	Type	Default	Description
id *	string | undefined	undefined	The id of the element
justify	'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'	end	position of items in footer

Slots

Section Footer

Name	Parameters	Description
default	()	The default content slot

Section Footer Item

Name	Parameters	Description
default	()	The default content slot