glide-design-system/src/stories/iconButton/IconButton.stories.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React from "react";
import homeIcon from "../assets/homeIcon.png";
import IconButton from "../../lib/components/iconButton/IconButton";

export default {
  title: "Components/IconButton",
  component: IconButton,
  tags: ["autodocs"],
  parameters: {
    docs: {
      description: {
        component:
          "The IconButton component is used to create a button that contains an icon, providing a visual representation for actions or functionalities. It is commonly used in toolbars, forms, and anywhere a compact, icon-based button is needed. ",
      },
    },
  },
  argTypes: {
    src: {
      control: "",
      description: "Source of the icon to be displayed on the button.",
    },
    variant: {
      control: "radio",
      description:
        "Specifies the button variant, with options like large, small, or medium.",
      options: ["large", "medium", "small"],
    },
    style: {
      control: "",
      description:
        "Additional CSS styles to apply to the Icon Button component for custom styling.",
    },
    iconStyle: {
      control: "",
      description:
        "Additional CSS styles to apply to the icon of the Icon Button component for custom styling.",
    },
    id: {
      control: "",
      description: "The unique identifier for the icon button.",
    },
    name: {
      control: "",
      description: "The name attribute for the icon button.",
    },
  },
};

const Template = (args) => <IconButton src={homeIcon} {...args} />;

export const Default = Template.bind({});
Default.args = {};

Default.parameters = {
  docs: {
    description: {
      story: "This story demonstrates the Icon Button component.",
    },
  },
};

export const CustomStyle = Template.bind({});
CustomStyle.args = {
  style: {
    backgroundColor: "red",
  },
};

CustomStyle.parameters = {
  docs: {
    description: {
      story: "This example shows how to use Icon Button with custom style.",
    },
  },
};

export const CustomIconStyle = Template.bind({});
CustomIconStyle.args = {
  iconStyle: {
    backgroundColor: "red",
  },
};

CustomIconStyle.parameters = {
  docs: {
    description: {
      story:
        "This example shows how to use Icon Button with custom icon style.",
    },
  },
};