#Button border doesn't match button shape

7 messages · Page 1 of 1 (latest)

oak garnet
#

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>```
oak garnet
#

Bump

lucid zinc
oak garnet
lucid zinc
oak garnet