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

Prop Name	Type	Default	Description
children	React.ReactNode	-	The buttons to be placed inside the footer
direction	"vertical" | "horizontal"	vertical	The direction the items in the footer should be laid out
header	React.ReactNode	-	Content placed at the top of the footer
variant	"nested" | "sticky"	nested	The variant of the footer

Footer Classes

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