Shorthand for variants

[ebon fog]

I think this is more a discussion but would it be possible to do shorthand for variants in the future or is it possible now but I am doing it wrong?

<Button variant={{hover ? 'outline' : 'gradient'}} gradient={{from: 'teal', to: 'blue', deg:105}}>

[inland bramble]

Does not this logic work for you?

[ebon fog]

It currently just spits out an error

https://codesandbox.io/s/variant-shorthand-5c1du1?file=/src/App.tsx

[tight elbow]

the error is because you are double wrapping {} in variant

// how it is currently:
variant={{hover ? "outline" : "gradient"}}
// how it should be:
variant={hover ? "outline" : "gradient"}

because of the extra {} it is reading the prop as an object instead of a string

[ebon fog]

I guess also I need to define hover

Ok got it working with this Thanks @tight elbow

https://codesandbox.io/s/variant-shorthand-5c1du1?file=/src/App.tsx

import React, { useState } from "react";
import { Container, Stack, Button, Text, Title } from "@mantine/core";
import "./styles.css";

export default function App() {
  const [hover, setHover] = useState(false);

  return (
    <Container>
      <Stack>
        <Text fw={500}> Nice gradient button </Text>
        <Button
          variant="gradient"
          gradient={{ from: "teal", to: "blue", deg: 105 }}
        >
          Hello World
        </Button>
        <Text fw={500}> Nice outline button </Text>
        <Button
          variant="outline"
          gradient={{ from: "teal", to: "blue", deg: 105 }}
        >
          Hello World
        </Button>
        <Text
          fw={700}
          variant="gradient"
          gradient={{ from: "teal", to: "blue", deg: 105 }}
        >
          A happy outline to gradient button
        </Text>
        <Button
          variant={hover ? "gradient" : "outline"}
          gradient={{ from: "teal", to: "blue", deg: 105 }}
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
        >
          Hello World
        </Button>
      </Stack>
    </Container>
  );
}