Home
/
Application UI
/
Action Panels

Action Panels

Action Panels are user interface elements used to trigger specific actions or operations within an application. They often contain buttons, or links that perform tasks when clicked.

Figma logo
Preview Action Panels in Figma

Action panel with button

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

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

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

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

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    panel: {
      alignItems: screens.sm ? "flex-start" : "stretch", // align panel to center
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG,
      boxShadow: token.boxShadowTertiary,
      display: "flex",
      flexDirection: "column",
      gap: token.margin,
      margin: "0 auto",
      maxWidth: "480px",
      padding: token.paddingLG
    },
    text: {
      color: token.colorTextSecondary
    },
    title: {
      fontSize: token.fontSizeHeading5,
      marginTop: 0
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div style={styles.panel}>
          <div>
          <Title level={1} style={styles.title}>
            Project drafts
          </Title>
          <Text style={styles.text}>
            Lorem ipsum dolor sit sdasd, consectetur adipiscing elit interdum
            hendrerit ex vitae sodales.
          </Text>
          </div>
          <Button type="primary">Primary</Button>
        </div>
      </div>
    </section>
  );
}

Action panel with two buttons

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

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

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

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

  const styles = {
    buttonsWrapper: {
      display: "flex",
      flexDirection: screens.sm ? "row" : "column",
      gap: token.marginXS
    },
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    panel: {
      alignItems: screens.sm ? "flex-start" : "stretch", // align panel to center
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG,
      boxShadow: token.boxShadowTertiary,
      display: "flex",
      flexDirection: "column",
      gap: token.margin,
      margin: "0 auto",
      maxWidth: "480px",
      padding: token.paddingLG
    },
    text: {
      color: token.colorTextSecondary
    },
    title: {
      fontSize: token.fontSizeHeading5,
      marginTop: 0
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div style={styles.panel}>
          <div>
            <Title level={1} style={styles.title}>
              Project drafts
            </Title>
            <Text style={styles.text}>
              Lorem ipsum dolor sit sdasd, consectetur adipiscing elit interdum
              hendrerit ex vitae sodales.
            </Text>
          </div>
          <div style={styles.buttonsWrapper}>
            <Button type="primary">Primary</Button>
            <Button>Default</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

Action panel with button on right

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

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

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

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

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    panel: {
      alignItems: screens.sm ? "flex-start" : "stretch", // align panel to center
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG,
      boxShadow: token.boxShadowTertiary,
      display: "flex",
      flexDirection: screens.sm ? "row" : "column",
      gap: token.margin,
      margin: "0 auto",
      maxWidth: "480px",
      padding: token.paddingLG
    },
    text: {
      color: token.colorTextSecondary
    },
    title: {
      fontSize: token.fontSizeHeading5,
      marginTop: 0
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div style={styles.panel}>
          <div>
          <Title level={1} style={styles.title}>
            Project drafts
          </Title>
          <Text style={styles.text}>
            Lorem ipsum dolor sit sdasd, consectetur adipiscing elit interdum
            hendrerit ex vitae sodales.
          </Text>
          </div>
          <Button type="primary">Primary</Button>
        </div>
      </div>
    </section>
  );
}

Action panel with input

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Button, Form, Grid, Input, theme, Typography } from "antd";

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

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

  const styles = {
    button: {
      width: screens.xs ? "100%" : "auto"
    },
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    input: {
      marginBottom: screens.xs ? token.marginXS : 0,
      width: screens.xs ? "100%" : "auto"
    },
    panel: {
      alignItems: screens.sm ? "flex-start" : "stretch", // align panel to center
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG,
      boxShadow: token.boxShadowTertiary,
      display: "flex",
      flexDirection: "column",
      gap: token.margin,
      margin: "0 auto",
      maxWidth: "480px",
      padding: token.paddingLG
    },
    text: {
      color: token.colorTextSecondary
    },
    title: {
      fontSize: token.fontSizeHeading5,
      marginTop: 0
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div style={styles.panel}>
          <div>
            <Title level={1} style={styles.title}>
              Project drafts
            </Title>
            <Text style={styles.text}>
              Lorem ipsum dolor sit sdasd, consectetur adipiscing elit interdum
              hendrerit ex vitae sodales.
            </Text>
          </div>
          <Form name="email_form" layout="inline">
            <Form.Item name="email" style={styles.input}>
              <Input placeholder="Email" />
            </Form.Item>
            <Form.Item style={styles.button}>
              <Button type="primary" style={styles.button}>Save</Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </section>
  );
}

Action panel with switch

Unlock code
arrow_forward
visibility
Preview
code
Code
Spinner
Copy
import React from "react";

import { Grid, Switch, theme, Typography } from "antd";

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

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

  const onChange = (checked) => {
    console.log(`switch to ${checked}`);
  };

  const styles = {
    container: {
      margin: "0 auto",
      maxWidth: token.screenXL,
      padding: screens.md ? `0px ${token.paddingLG}px` : `0px ${token.padding}px`
    },
    panel: {
      alignItems: "flex-start", // align panel to center
      backgroundColor: token.colorBgContainer,
      borderRadius: token.borderRadiusLG,
      boxShadow: token.boxShadowTertiary,
      display: "flex",
      flexDirection: "row",
      gap: token.margin,
      margin: "0 auto",
      maxWidth: "480px",
      padding: token.paddingLG
    },
    text: {
      color: token.colorTextSecondary
    },
    title: {
      fontSize: token.fontSizeHeading5,
      marginTop: 0
    }
  };

  return (
    <section>
      <div style={styles.container}>
        <div style={styles.panel}>
          <div>
          <Title level={1} style={styles.title}>
            Project drafts
          </Title>
          <Text style={styles.text}>
            Lorem ipsum dolor sit sdasd, consectetur adipiscing elit interdum
            hendrerit ex vitae sodales.
          </Text>
          </div>
          <Switch defaultChecked onChange={onChange} />
        </div>
      </div>
    </section>
  );
}