feat: add ButtonSecondary component

src/components/ButtonSecondary.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { userEvent } from "@storybook/test";
+
+import { ButtonSecondary } from "./ButtonSecondary";
+
+const meta = {
+  component: ButtonSecondary,
+} satisfies Meta<typeof ButtonSecondary>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {
+  args: {
+    children: "Click me",
+    disabled: false,
+  },
+} satisfies Story;
+
+export const Interactivity = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <ButtonSecondary>Focused</ButtonSecondary>
+      <ButtonSecondary disabled>Disabled</ButtonSecondary>
+    </div>
+  ),
+  play: async () => {
+    await userEvent.tab();
+  },
+} satisfies Story;
+
+export const Sizes = {
+  render: () => (
+    <div className="flex flex-col items-start gap-4">
+      <ButtonSecondary size="sm">Small</ButtonSecondary>
+      <ButtonSecondary size="md">Medium</ButtonSecondary>
+      <ButtonSecondary size="lg">Large</ButtonSecondary>
+    </div>
+  ),
+} satisfies Story;
+
+export const Sentiments = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <ButtonSecondary sentiment="neutral">Neutral</ButtonSecondary>
+      <ButtonSecondary sentiment="danger">Danger</ButtonSecondary>
+    </div>
+  ),
+} satisfies Story;

src/components/ButtonSecondary.tsx

@@ -0,0 +1,35 @@
+import { clsx } from "clsx/lite";
+import { forwardRef } from "react";
+
+import { Button, type ButtonProps } from "./Button";
+
+export interface ButtonSecondaryProps extends ButtonProps {
+  size?: "sm" | "md" | "lg";
+  sentiment?: "neutral" | "danger";
+}
+
+export const ButtonSecondary = forwardRef(function ButtonSecondary(
+  {
+    size = "md",
+    sentiment = "neutral",
+    className,
+    ...props
+  }: ButtonSecondaryProps,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) {
+  return (
+    <Button
+      ref={ref}
+      size={size}
+      className={clsx(
+        className,
+        "bg-ui-neutral-50 font-medium ring-1 ring-inset",
+        sentiment === "neutral" &&
+          "text-ui-primary-700 ring-ui-primary-600 active:bg-ui-primary-100",
+        sentiment === "danger" &&
+          "text-ui-danger-700 ring-ui-danger-600 active:bg-ui-danger-100",
+      )}
+      {...props}
+    />
+  );
+});

src/docs/sample.mdx

@@ -2,6 +2,7 @@ import { Unstyled } from "@storybook/blocks";
 
 import { Alert } from "../components/Alert";
 import { ButtonPrimary } from "../components/ButtonPrimary";
+import { ButtonSecondary } from "../components/ButtonSecondary";
 import { Input } from "../components/Input";
 
 <Unstyled>
@@ -14,7 +15,7 @@ import { Input } from "../components/Input";
         <div className="flex flex-wrap gap-2">
           <Input size="sm" placeholder="Placeholder" />
           <ButtonPrimary size="sm">Ok</ButtonPrimary>
-          <ButtonPrimary size="sm">Cancel</ButtonPrimary>
+          <ButtonSecondary size="sm">Cancel</ButtonSecondary>
         </div>
       </div>
     </Alert>

src/mod.ts

@@ -3,4 +3,8 @@ export {
   ButtonPrimary,
   type ButtonPrimaryProps,
 } from "./components/ButtonPrimary";
+export {
+  ButtonSecondary,
+  type ButtonSecondaryProps,
+} from "./components/ButtonSecondary";
 export { Input, type InputProps } from "./components/Input";