So today I played around a bit with components trying to understand how to properly set them up.
So I started with the most obvious and basic.. a button. Now I understand that you can use properties for the text, link and all that good stuff.
Where I am completely lost however is where variants are helpfull..
I don’'t know about you guys, but if I drop my button component I want the obvious options and when it comes to how it looks preferably just 2-3 select options (style, button type etc.)
I’'d say use the variants for the different types of buttons, outline, filled, rounded, rounded outline?
And then use the style to apply all the colors using primary, secondary etc.
But that would mean still having to overwrite quite some CSS to remove all the defaults from bricks with your own color palette.
I just hope I am completely missunderstanding how to properly do this and someone can point me in the right direction.
Hi Stan,
So far, everything sounds pretty reasonable
However, for a custom button component, I wouldn’t choose the native button element as a basis, but rather the text-link element—solely for the reason of having as few default styles as possible.
Thanks so much for replying! Didn’t think I was going to get any further haha
So meanwhile, I did get a bit further. I basically spent the last weeks just exploring bricks without building anything as I want to avoid making the mistakes I have done in the past. Basically trying to setup a proper foundation.
I tried loads of things but somehow compeltely missed the theme styles menu.. So after setting that up with variables using the button component became much much easier. However it did raise the question even more of why would I need a variant for this? Since modifying the theme styles kind of makes that useless.. Then again a button element might not be the best example for a variant.
Thanks for the tip! So you’re saying create all variables and use css select elements in the component? Or the variant route? I hope you don’t mind giving me one more reply as I really want to avoid making my life more difficult because of poor choices now haha
I do see however how it makes more sense to use the text link as it is more of a blank canvas.
Yeah that makes total sense as well. It was more of a test setup in my case trying to understand how to set them up, link properties etc. But this was before I discovered the theme style section.
I had the biggest facepalm moment the other day when I saw that. I read through so much docs, watched so many videos and kind of ignored style in general at first. As I was more captured by the other amazing features. So I guess that’s where I missed it somehow.
Anyhow having added my variables in there now it kind of makes no sense to have a button component indeed
