import { Footer } from '@uhg-abyss/mobile';

variant

direction

() => {
  return (
    <Footer>
      <Button variant="brand">Agree</Button>
      <Button type="outline">Disagree</Button>
    </Footer>
  );
};

Variant

Use the variant prop to set the variant of the footer. The footer can be 'nested' or 'sticky'.

Direction

Use the direction prop to set the direction of the items in the footer. The footer should house up to three buttons in its vertically stacked variant and up to two buttons in its horizontally stacked variant.

Header

Use the header prop to set the header of the footer.

Footer Props

Name	Type	Default	Description
children	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined		The buttons to be placed inside the footer
direction	"horizontal" | "vertical" | undefined	'vertical'	The direction the items in the footer should be laid out
header	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined		Content placed at the top of the footer
variant	"sticky" | "nested" | undefined	'nested'	The variant of the footer

Footer Classes

Class Name	Description
abyss-footer-header	Footer header wrapping element
abyss-footer-root	Footer root element