Secondary Button

import React from "@rbxts/react";
import { useTheme } from "@robloxui/theme";

interface SecondaryButtonProps {
  text: string;
  onClick: () => void;
  disabled?: boolean;
}

export function SecondaryButton({ text, onClick, disabled = false }: SecondaryButtonProps) {
  const { colors, spacing } = useTheme();

  return (
    <textbutton
      Text={text}
      BackgroundColor3={colors.bgSecondary}
      BorderColor3={colors.border}
      TextColor3={colors.textPrimary}
      AutoButtonColor={!disabled}
      Event={{ Activated: disabled ? undefined : onClick }}
      Size={new UDim2(0, 0, 0, 0)}
      AutomaticSize={"XY"}
    >
      <uipadding
        PaddingTop={new UDim(0, spacing.sm)}
        PaddingBottom={new UDim(0, spacing.sm)}
        PaddingLeft={new UDim(0, spacing.md)}
        PaddingRight={new UDim(0, spacing.md)}
      />
      <uicorner CornerRadius={new UDim(0, 8)} />
      <uistroke Thickness={1} Color={colors.border} />
    </textbutton>
  );
}