How to change an individual button size for different screen size?

[vovados1]

I want my button size to be "sm" as a base, and "md" for "md" (and larger). However, size prop doesn't allow to use an object like {{ base: "sm", md: "md" }}. What can I do?

<Button
  component={Link}
  rightSection={<ArrowRightIcon width="75%" />}
  href="/sign-up"
  color="dark"
  variant="outline"
  size="md"
  fullWidth
>
  Sign in
</Button>

[rtivital]

https://mantine.dev/styles/responsive/#component-size-based-on-media-query

[vovados1]

Yup, that works, thanks! By the way, what was the motivation to NOT implement a media query object within the size prop (I mean like { base: "md", ... })? I feel like it would decrease a significant portion of code, especially if you have a bunch of breakpoints where you want to change the size. Because even with only 2 breakpoints it looks a lot.

{/* For <= sm */}
<Button
  component={Link}
  rightSection={<ArrowRightIcon width="75%" />}
  href="/sign-up"
  color="dark"
  size="sm"
  hiddenFrom="sm"
  fullWidth
>
  Create Account
</Button>
{/* For >= sm */}
<Button
  component={Link}
  rightSection={<ArrowRightIcon width="75%" />}
  href="/sign-up"
  color="dark"
  size="md"
  visibleFrom="sm"
  fullWidth
>
  Create Account
</Button>

[sovetski]

@vovados1 you should not accept his answer as the correct answer...