Untitled

const { widget } = figma;
const { useEffect, AutoLayout, Text } = widget;

function ClearApplyButtons() {
  useEffect(() => {
    const createComponent = async () => {
      const node = await figma.createNodeFromJSXAsync(
        <AutoLayout 
          spacing={12}
          horizontalAlignItems="center"
          verticalAlignItems="center"
          width={400}
          padding={16}
        >
          {/* Clear all button */}
          <AutoLayout
            fill="#FFFFFF"
            stroke="#E1E4EA"
            cornerRadius={8}
            padding={{ top: 12, bottom: 12, left: 24, right: 24 }}
            width={180}
            horizontalAlignItems="center"
            verticalAlignItems="center"
            onClick={() => {}}
          >
            <Text
              fontSize={16}
              fontFamily="Inter"
              fontWeight="medium"
              fill="#18191B"
            >
              Clear all
            </Text>
          </AutoLayout>

          {/* Apply button */}
          <AutoLayout
            fill="#18191B"
            cornerRadius={8}
            padding={{ top: 12, bottom: 12, left: 24, right: 24 }}
            width={180}
            horizontalAlignItems="center"
            verticalAlignItems="center"
            onClick={() => {}}
          >
            <Text
              fontSize={16}
              fontFamily="Inter"
              fontWeight="medium"
              fill="#FFFFFF"
            >
              Apply
            </Text>
          </AutoLayout>
        </AutoLayout>
      );

      figma.currentPage.appendChild(node);
      figma.viewport.scrollAndZoomIntoView([node]);
    };
    createComponent();
  });

  return <Text>Clear and Apply Buttons</Text>;
}

widget.register(ClearApplyButtons);