Section Footers

Section footers contain actions or navigation components. Often they contain actions to save the settings or user choices related to particular section.

Section footer with buttons

Unlock code
arrow_forward
Spinner
Copy
import React from "react";

import { Button, Divider, Grid, Space, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    footer: {
      display: "flex",
      justifyContent: "flex-end",
      width: "100%"
    },
    paragraph: {
      color: token.colorTextSecondary
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeLG}px 0px`
    },
    textWrapper: {
      width: "100%"
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
        <Divider direction="horizontal" />
        <div style={styles.footer}>
          <Space>
            <Button>Cancel</Button>
            <Button type="primary">Save</Button>
          </Space>
        </div>
      </div>
    </div>
  );
}

Section footer with button groups

Unlock code
arrow_forward
Spinner
Copy
import React from "react";

import { Button, Divider, Dropdown, Grid, Space, theme, Typography } from "antd";

import { MoreOutlined } from "@ant-design/icons";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const items = [
    {
      label: "Action 1",
      key: "1",
      type: "default",
    },
    {
      label: "Action 2",
      key: "2",
      type: "default",
    },
    {
      label: "Action 3",
      key: "3",
      type: "default",
    },
    {
      label: "Action 4",
      key: "4",
      type: "default",
    },
  ];
  const menuProps = {
    items,
  };

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    footer: {
      alignContent: "center",
      alignItems: screens.md ? "flex-end" : "flex-start",
      justifyContent: "space-between",
      width: "100%"
    },
    paragraph: {
      color: token.colorTextSecondary
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeLG}px 0px`
    },
    textWrapper: {
      width: "100%"
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
        <Divider direction="horizontal" />
        <Space size="middle" direction="horizontal" style={styles.footer}>
          {screens.lg ? (
            <Space.Compact>
              {items.map((item) => (
                <Button key={item.key} type={item.type}>
                  {item.label}
                </Button>
              ))}
            </Space.Compact>
          ) : (
            <Dropdown menu={menuProps} placement="topRight" arrow>
              <Button type="text" icon={<MoreOutlined />} />
            </Dropdown>
          )}
          <Space>
            <Button>Cancel</Button>
            <Button type="primary">Save</Button>
          </Space>
        </Space>
      </div>
    </div>
  );
}

Section footer with pagination

Unlock code
arrow_forward
Spinner
Copy
import React from "react";

import { Divider, Grid, Pagination, theme, Typography } from "antd";

const { useToken } = theme;
const { useBreakpoint } = Grid;
const { Text } = Typography;

export default function App() {
  const { token } = useToken();
  const screens = useBreakpoint();

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: screens.lg ? token.screenXL : token.screenSM,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    footer: {
      display: "flex",
      justifyContent: screens.md ? "end" : "center",
      width: "100%"
    },
    header: {
      backgroundColor: token.colorBgContainer
    },
    paragraph: {
      color: token.colorTextSecondary
    },
    placeholder: {
      backgroundColor: token.colorBgLayout,
      border: `${token.lineWidth}px dashed ${token.colorBorder}`,
      borderRadius: token.borderRadiusLG,
      padding: token.paddingLG,
      textAlign: "center"
    },
    section: {
      backgroundColor: token.colorBgContainer,
      padding: `${token.sizeLG}px 0px`
    },
    title: {
      fontSize: token.fontSizeHeading4,
      marginBottom: token.marginXXS,
      marginTop: 0
    }
  };

  return (
    <div style={styles.section}>
      <div style={styles.container}>
        <div style={styles.placeholder}>
          <Text>Content</Text>
        </div>
        <Divider direction="horizontal" />

        <div style={styles.footer}>
          <Pagination defaultCurrent={1} total={50} />
        </div>
      </div>
    </div>
  );
}