Various styling issues

[arodriguezcortes]

Hi Paste team.

First I want to give you kudos, the components look great! I have some inquiries about styling I want to discuss with you.

1. I'm trying to create a tooltip inside a table cell similar to what you showcase in the documentation here. However, I haven't been able to make the icon stay in the same line as the text and vertically aligned. You can find what I get in the images below. Can you give me a hint on how to make this work.

Using display="block" in the icon.

Using display="inline-block" in the icon.

Using display="inline" in the icon.

2. I want to display an alert box but seems that it doesn't have a margin-bottom by default and it's not in its props. I'm new to Paste, and I was considering using a <Stack /> element to achieve the spacing but just want to confirm if you would also recommend that or have any suggestions regarding this.

Many thanks!

[arodriguezcortes]

I've solved the first question. I just realized you are using a <Box /> with display: flex in the example 😬

I'd appreciate any recommendation regarding the second question though.

Thanks!

[nkrantz]

Hey @arodriguezcortes! Welcome to Paste 😄

You're correct that Alert doesn't have a marginBottom prop. That's because we treat our components as the building blocks of the UI, and we suggest using Layout components to format your spacing and to compose with multiple components. Stack is definitely an option, however I'd probably recommend using a Box with a marginBottom. That way, no matter where your Alert is placed (within a Stack or outside of a Stack), it will retain its spacing.

Not sure what you're using for the paragraph below the Alert, but if you're using the Text Primitive, I'll note that that accepts a marginTop, which could be another option for you.

[arodriguezcortes]

Hi @nkrantz. Thanks a lot for your response, it's very helpful.