Button border doesn't match button shape | Mantine | Page 1

oak garnet Mar 12, 2024, 7:17 PM

#

My CSS:

.mantine-Button-root {
  &[data-variant="outline"] {
    border-color: var(--mantine-color-primary);
    color: var(--mantine-color-primary);
  }

  &[data-border="true"] {
    border-left: light-dark(24px solid #9CA3AF, 24px solid var(--mantine-color-darkBlue3-0))
  }
  
  &[data-variant="filled"] {
    background-color: light-dark(var(--mantine-color-darkBlue-1), var(--mantine-color-white));
    color: light-dark(var(--mantine-color-white), var(--mantine-color-darkBlue-1));
  }
}```

#

Button:

   <Button data-border="true" variant="filled" mx={{base: "auto", sm: 0}} maw="20rem" fz="1.4rem" size="xl" rightSection={<TbChevronRight size="1.6rem"/>}>Go business </Button>```