Footer
Footer provides a designated area at the bottom of your application for footer content such as branding, copyright notices, or utility controls like theme toggles.
Behaviors
This component supports the following behaviors:
| Behavior | Properties |
|---|---|
| Animation | animation, animationOptions |
| Bookmark | bookmark, bookmarkLevel, bookmarkTitle, bookmarkOmitFromToc |
| Component Label | label, labelPosition, labelWidth, labelBreak, required, enabled, shrinkToLabel, style, readOnly |
| Publish/Subscribe | subscribeToTopic |
| Tooltip | tooltip, tooltipMarkdown, tooltipOptions |
| Styling Variant | variant |
Properties
sticky
default: true
When set to true (default), keeps the Footer docked to the bottom of the page in sticky layouts. When set to false, allows the Footer to scroll with the main content for non-desktop layouts. In desktop layout, the Footer remains sticky regardless of this property.
Events
This component does not have any events.
Exposed Methods
This component does not expose any methods.
Styling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-Footer | $backgroundColor-AppHeader | $backgroundColor-AppHeader |
| border-Footer | none | none |
| borderBottom-Footer | none | none |
| borderBottomColor-Footer | none | none |
| borderBottomStyle-Footer | none | none |
| borderBottomWidth-Footer | none | none |
| borderColor-Footer | none | none |
| borderEndEndRadius-Footer | none | none |
| borderEndStartRadius-Footer | none | none |
| borderHorizontal-Footer | none | none |
| borderHorizontalColor-Footer | none | none |
| borderHorizontalStyle-Footer | none | none |
| borderHorizontalWidth-Footer | none | none |
| borderLeft-Footer | none | none |
| borderLeftColor-Footer | none | none |
| borderLeftStyle-Footer | none | none |
| borderLeftWidth-Footer | none | none |
| borderRight-Footer | none | none |
| borderRightColor-Footer | none | none |
| borderRightStyle-Footer | none | none |
| borderRightWidth-Footer | none | none |
| borderStartEndRadius-Footer | none | none |
| borderStartStartRadius-Footer | none | none |
| borderStyle-Footer | none | none |
| borderTop-Footer | 1px solid $borderColor | 1px solid $borderColor |
| borderTopColor-Footer | none | none |
| borderTopStyle-Footer | none | none |
| borderTopWidth-Footer | none | none |
| borderVertical-Footer | none | none |
| borderVerticalColor-Footer | none | none |
| borderVerticalStyle-Footer | none | none |
| borderVerticalWidth-Footer | none | none |
| borderWidth-Footer | none | none |
| fontSize-Footer | $fontSize-sm | $fontSize-sm |
| gap-Footer | $space-normal | $space-normal |
| height-Footer | none | none |
| margin-Footer | 0 auto | 0 auto |
| maxWidth-content-Footer | $maxWidth-content | $maxWidth-content |
| padding-Footer | $space-2 $space-4 | $space-2 $space-4 |
| paddingBottom-Footer | none | none |
| paddingHorizontal-Footer | none | none |
| paddingLeft-Footer | none | none |
| paddingRight-Footer | none | none |
| paddingTop-Footer | none | none |
| paddingVertical-Footer | none | none |
| textColor-Footer | $textColor-secondary | $textColor-secondary |
| verticalAlignment-Footer | center | center |