@crossed/demo/lib/module/ui/forms/Button.js

A universal & performant styling library for React Native, Next.js & React

import { jsx, jsxs } from "react/jsx-runtime";
import { Button, Text, UilMessage, XBox, YBox } from "@crossed/ui";
const ButtonDemo = ({ size, color, variant }) => {
  return /* @__PURE__ */ jsxs(XBox, { space: "md", children: [
    /* @__PURE__ */ jsxs(YBox, { space: "sm", children: [
      /* @__PURE__ */ jsx(Text, { children: "Simple" }),
      /* @__PURE__ */ jsx(
        Button,
        {
          text: "Button",
          icon: /* @__PURE__ */ jsx(UilMessage, {}),
          color,
          size,
          variant
        }
      ),
      /* @__PURE__ */ jsx(
        Button,
        {
          text: "Disabled",
          icon: /* @__PURE__ */ jsx(UilMessage, {}),
          color,
          size,
          variant,
          disabled: true
        }
      )
    ] }),
    /* @__PURE__ */ jsxs(YBox, { space: "sm", children: [
      /* @__PURE__ */ jsx(Text, { children: "Advanced" }),
      /* @__PURE__ */ jsxs(
        Button,
        {
          "aria-label": "advanced Button",
          color,
          size,
          variant,
          children: [
            /* @__PURE__ */ jsx(Button.Element, { children: /* @__PURE__ */ jsx(UilMessage, {}) }),
            /* @__PURE__ */ jsx(Button.Text, { children: "Button" })
          ]
        }
      ),
      /* @__PURE__ */ jsxs(
        Button,
        {
          "aria-label": "disabled Button advanced",
          color,
          size,
          variant,
          disabled: true,
          children: [
            /* @__PURE__ */ jsx(Button.Element, { children: /* @__PURE__ */ jsx(UilMessage, {}) }),
            /* @__PURE__ */ jsx(Button.Text, { children: "Disabled" })
          ]
        }
      )
    ] })
  ] });
};
export {
  ButtonDemo
};
//# sourceMappingURL=Button.js.map