IconButton and ButtonPreset docs + preview

@stellar/design-system-website/docs/components/buttons/button-preset.mdx

@@ -0,0 +1,19 @@
+---
+slug: /button-preset
+---
+
+# Button preset
+
+<ComponentDescription componentName="ButtonPreset" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="ButtonPreset">
+  <ButtonPreset preset="copy" />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="ButtonPreset" />

@stellar/design-system-website/docs/components/buttons/icon-button.mdx

@@ -0,0 +1,19 @@
+---
+slug: /icon-button
+---
+
+# Icon button
+
+<ComponentDescription componentName="IconButton" />
+
+## Example
+
+```tsx live
+<PreviewBlock componentName="IconButton">
+  <IconButton altText="Default" icon={<Icon.Info />} />
+</PreviewBlock>
+```
+
+## Props
+
+<ComponentProps componentName="IconButton" />

@stellar/design-system-website/src/componentPreview/buttonPresetPreview.tsx

@@ -0,0 +1,89 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const buttonPresetPreview: ComponentPreview = {
+  options: [
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+    {
+      type: "select",
+      prop: "preset",
+      options: [
+        {
+          value: "copy",
+          label: "Copy",
+        },
+        {
+          value: "download",
+          label: "Download",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "variant",
+      options: [
+        {
+          value: "default",
+          label: "Default",
+        },
+        {
+          value: "highlight",
+          label: "Highlight",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "label",
+      options: [
+        {
+          value: "",
+          label: "Default label",
+        },
+        {
+          value: "Label",
+          label: "Custom label",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "customSize",
+      options: [
+        {
+          value: "",
+          label: "Default size",
+        },
+        {
+          value: "2rem",
+          label: "2 rem",
+        },
+        {
+          value: "3rem",
+          label: "3 rem",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "customColor",
+      options: [
+        {
+          value: "",
+          label: "Default color",
+        },
+        {
+          value: "var(--color-green-50)",
+          label: "Green",
+        },
+        {
+          value: "var(--color-yellow-50)",
+          label: "Yellow",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/componentPreview/iconButtonPreview.tsx

@@ -0,0 +1,87 @@
+import { ComponentPreview } from "@site/src/components/PreviewBlock";
+
+export const iconButtonPreview: ComponentPreview = {
+  options: [
+    {
+      type: "checkbox",
+      prop: "disabled",
+      label: "Disabled",
+    },
+    {
+      type: "select",
+      prop: "variant",
+      options: [
+        {
+          value: "default",
+          label: "Default",
+        },
+        {
+          value: "error",
+          label: "Error",
+        },
+        {
+          value: "success",
+          label: "Success",
+        },
+        {
+          value: "warning",
+          label: "Warning",
+        },
+        {
+          value: "highlight",
+          label: "Highlight",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "label",
+      options: [
+        {
+          value: "",
+          label: "No label",
+        },
+        {
+          value: "Label",
+          label: "Label",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "customSize",
+      options: [
+        {
+          value: "",
+          label: "Default size",
+        },
+        {
+          value: "2rem",
+          label: "2 rem",
+        },
+        {
+          value: "3rem",
+          label: "3 rem",
+        },
+      ],
+    },
+    {
+      type: "select",
+      prop: "customColor",
+      options: [
+        {
+          value: "",
+          label: "Default color",
+        },
+        {
+          value: "var(--color-purple-50)",
+          label: "Purple",
+        },
+        {
+          value: "var(--color-yellow-50)",
+          label: "Yellow",
+        },
+      ],
+    },
+  ],
+};

@stellar/design-system-website/src/components/PreviewBlock/index.tsx

@@ -11,8 +11,10 @@ import { avatarPreview } from "@site/src/componentPreview/avatarPreview";
 import { badgePreview } from "@site/src/componentPreview/badgePreview";
 import { bannerPreview } from "@site/src/componentPreview/bannerPreview";
 import { buttonPreview } from "@site/src/componentPreview/buttonPreview";
+import { buttonPresetPreview } from "@site/src/componentPreview/buttonPresetPreview";
 import { captionPreview } from "@site/src/componentPreview/captionPreview";
 import { headingPreview } from "@site/src/componentPreview/headingPreview";
+import { iconButtonPreview } from "@site/src/componentPreview/iconButtonPreview";
 import { inputPreview } from "@site/src/componentPreview/inputPreview";
 import { linkPreview } from "@site/src/componentPreview/linkPreview";
 import { loaderPreview } from "@site/src/componentPreview/loaderPreview";
@@ -34,8 +36,10 @@ const previews: { [key: string]: ComponentPreview } = {
   Badge: badgePreview,
   Banner: bannerPreview,
   Button: buttonPreview,
+  ButtonPreset: buttonPresetPreview,
   Caption: captionPreview,
   Heading: headingPreview,
+  IconButton: iconButtonPreview,
   Input: inputPreview,
   Link: linkPreview,
   Loader: loaderPreview,

@stellar/design-system/src/components/ButtonPreset/index.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Icon } from "../../icons";
+
+/** Including all valid [button attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes) */
+export interface ButtonPresetProps {
+  /** Button preset */
+  preset: "copy" | "download";
+  /** Button variant */
+  variant?: "default" | "highlight";
+  /** Button label */
+  label?: string;
+  /** Alternative text to show on hover */
+  altText?: string;
+  /** Set custom color */
+  customColor?: string;
+  /** Set custom size */
+  customSize?: string;
+}
+
+interface Props
+  extends ButtonPresetProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const presetDetails = {
+  copy: {
+    label: "Copy",
+    altText: "Copy",
+    icon: <Icon.ContentCopy />,
+  },
+  download: {
+    label: "Download",
+    altText: "Download",
+    icon: <Icon.Download />,
+  },
+};
+
+/**
+ * `ButtonPreset` is similar to the {@button Button} component, and is used to trigger an action. There are two presets `copy` and `download`, and two variants for color: `default` and `highlight`.
+ */
+export const ButtonPreset: React.FC<Props> = ({
+  altText,
+  label,
+  variant = "default",
+  preset,
+  customColor,
+  customSize,
+  ...props
+}: Props) => {
+  const customStyle = {
+    ...(customColor ? { "--IconButton-color": customColor } : {}),
+    ...(customSize ? { "--IconButton-size": customSize } : {}),
+  } as React.CSSProperties;
+
+  return (
+    <button
+      className={`IconButton IconButton--${variant}`}
+      title={altText ?? presetDetails[preset].altText}
+      {...props}
+      style={customStyle}
+    >
+      <>
+        <span className="IconButton__label">
+          {label ?? presetDetails[preset].label}
+        </span>
+        {presetDetails[preset].icon}
+      </>
+    </button>
+  );
+};
+
+ButtonPreset.displayName = "ButtonPreset";