[AlertDialog] Issue

[machineman10]

im using nextjs 13.5.4. working well on development but buttons not showing in next build

[vladmoroz]

Can you share more details or a repro?

[machineman10]

Can you share more details or a repro?

Delete issue {isDeleting && } Confirm Deletion Do you want to permanently delete this issue?

      <Flex mt="4" gap="3" justify="end">
        <AlertDialogCancel>
          <Button
            variant="soft"
            color="gray"
            style={{ backgroundColor: "var(--accent-a3)" }}
            className="cursor-pointer"
          >
            Cancel
          </Button>
        </AlertDialogCancel>
        <AlertDialogAction>
          <Button
            color="red"
            style={{ backgroundColor: "var(--accent-11)" }}
            variant="solid"
            className="cursor-pointer"
            onClick={deleteHandler}
          >
            Delete
          </Button>
        </AlertDialogAction>
      </Flex>
    </AlertDialogContent>
  </AlertDialogRoot>

I had to add inline background color to make these buttons visible. works fine on dev but in production build I'm seeing a backgroundColor: transparent style from radix ui theme css, in all of the buttons inside AlertDialog. Also, buttons inside AlertDialog are not cursor-pointer by default.

[vladmoroz]

If you are using Tailwind, the transparent background color is likely caused by an overzealous Tailwind reset, see this comment for solution:
#109 (comment)

Also, buttons inside AlertDialog are not cursor-pointer by default.

This is the default browser behaviour which Radix Themes respects. If you want pointer cursors, you can create add a style that overrides these variables on the .radix-themes selector:
https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/styles/tokens/cursor.css

[machineman10]

If you are using Tailwind, the transparent background color is likely caused by an overzealous Tailwind reset, see this comment for solution: #109 (comment)

Also, buttons inside AlertDialog are not cursor-pointer by default.

This is the default browser behaviour which Radix Themes respects. If you want pointer cursors, you can create add a style that overrides these variables on the .radix-themes selector: https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/styles/tokens/cursor.css

Worked. Thanks 🥳