Footer

Design System - Footer component

The Footer component provides navigational actions or supplementary content at the bottom of pages. It serves as a closing control panel for tasks or flows, ensuring alignment with accessibility, responsiveness, and contextual clarity across applications.

// Sample code

  <CheckBox
    label="Label"
    onChange={(e)=>{console.log(e.target.checked}}
  />

// Sample code

DigitAccordion(
              header: Text('Accordion'),
              content: Text('This is the content of Accordion'),
              initiallyExpanded: false,
              divider: true,
              showBorder: true,
            ),

Anatomy

Variants

Default

A straightforward footer with clearly defined action buttons like "Back" and "Next," used in linear flows or form-based screens.

Flex A more dynamic variant that allows flexible content like dropdown menus, dynamic button alignment, and custom text

Properties

Button Supports multiple button styles, including: Primary (e.g., “Next”) Secondary (e.g., “Back”) Tertiary (optional actions) Dropdown / Dropup menus (used to group multiple actions)

Extra Content Allows inclusion of helper or legal text beneath or between buttons, offering context or attribution.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

Property

Value

Default

className

text

style

text

actionFields

yes/no

maxActionFieldsAllowed

yes/no

sortActionFields

number

setactionFieldsToRight

yes/no

setactionFieldsToLeft

yes/no

children

yes/no

Usage Guide

Button Labeling

Clearly label all buttons with actionable language like “Next,” “Submit,” or “Save”.  Avoid using vague or unclear labels like “Click” or “Okay” that provide no guidance on the action.

Change log

Date

Number

Notes

Design Checklist

PreviousFilter Card NextHeader

Last updated 5 days ago

Was this helpful?