feat: add LoadingPill component

libs/webb-ui-components/src/components/buttons/LoadingPill.tsx

@@ -0,0 +1,48 @@
+import { forwardRef } from 'react';
+import { LoadingPillProps } from './types';
+import { twMerge } from 'tailwind-merge';
+import {
+  CheckboxCircleLine,
+  CloseCircleLineIcon,
+  Spinner,
+} from '@webb-tools/icons';
+
+const LoadingPill = forwardRef<HTMLButtonElement, LoadingPillProps>(
+  ({ className, status = 'loading', ...props }, ref) => {
+    return (
+      <button
+        {...props}
+        type="button"
+        className={twMerge(
+          'rounded-full border-2 py-2 px-4',
+          'bg-mono-0/10 border-mono-60',
+          'hover:bg-mono-0/30',
+          'dark:bg-mono-0/5 dark:border-mono-140',
+          'dark:hover:bg-mono-0/10',
+          className
+        )}
+        ref={ref}
+      >
+        <div className="flex items-center justify-center">
+          {status === 'loading' ? (
+            <Spinner size="lg" />
+          ) : status === 'success' ? (
+            <CheckboxCircleLine
+              className="fill-green-70 dark:fill-green-50"
+              size="lg"
+            />
+          ) : (
+            status === 'error' && (
+              <CloseCircleLineIcon
+                className="fill-red-70 dark:fill-red-50"
+                size="lg"
+              />
+            )
+          )}
+        </div>
+      </button>
+    );
+  }
+);
+
+export default LoadingPill;

libs/webb-ui-components/src/components/buttons/index.ts

@@ -1,4 +1,5 @@
 export { default as Button } from './Button';
 export { default as ChainButton } from './ChainButton';
 export { default as WalletButton } from './WalletButton';
+export { default as LoadingPill } from './LoadingPill';
 export * from './types';

libs/webb-ui-components/src/components/buttons/types.ts

@@ -198,3 +198,16 @@ export type WalletButtonProps = PropsOf<'button'> & {
    */
   address: string;
 };
+
+export type LoadingPillStatus = 'success' | 'loading' | 'error';
+
+/**
+ * The LoadingPill component props
+ */
+export type LoadingPillProps = PropsOf<'button'> & {
+  /**
+   * Status of the pill
+   * @default "loading"
+   */
+  status?: LoadingPillStatus;
+};

libs/webb-ui-components/src/stories/molecules/LoadingPill.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LoadingPill from '../../components/buttons/LoadingPill';
+
+const meta: Meta<typeof LoadingPill> = {
+  title: 'Design System/V2 (WIP)/Molecules/LoadingPill',
+  component: LoadingPill,
+};
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default meta;
+
+type Story = StoryObj<typeof LoadingPill>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Default: Story = {
+  render: () => <LoadingPill />,
+};
+
+export const Success: Story = {
+  render: () => <LoadingPill status="success" />,
+};
+
+export const Error: Story = {
+  render: () => <LoadingPill status="error" />,
+};