#Can I set right button in Notification?

7 messages · Page 1 of 1 (latest)

sick plinth
#

I expected to set any right button (not close button) by setting disallowClose = false and children=<><Text>message</Text><Button>do some action</Button></> .

But Notification component's implement (=below code) seems did not allow those thing cause children prop is wrapped by Text component...

// mantine-core/Notification/Notification.tsx
      <div className={classes.body}>
        {title && (
          <Text className={classes.title} size="sm" weight={500}>
            {title}
          </Text>
        )}

        <Text color="dimmed" className={classes.description} size="sm">
          {children}
        </Text>
      </div>

      {!disallowClose && (
        <CloseButton
          {...closeButtonProps}
          iconSize={16}
          color="gray"
          onClick={onClose}
          className={classes.closeButton}
        />
      )}

Is there any way ?

unknown.png
round osprey
#

If you need more functionality, you can use a dialog, but it doesn't interop with the notifications manager by default unfortunately: https://mantine.dev/core/dialog/

twilit locust
#

Text is just a div under the hood. Use disallowClose and then put your button as you already did.

#

If you want to align it vertically in the center, I guess you should remove the title.

#

And use only the body.

sick plinth