Level 122
perhaps you are expecting to do too much with one button component.
Far easier to create a few that don't require you to specify a big long list of options.
Apr 23, 2022
11
Level 7
How do you create a Laravel Button Component - the best way to do a button
Hi there!
So I'm refactoring my webapp and I'm thinking about what would be the best way to create a button component.
Would you mind sharing your own button component that you use in projects, using blade?
I'm creating something like this, and for some reason something feels off, but maybe that's just because I might not be used to this, as I used to do this in React usually.
@props([
'label' => '',
'class' => '',
'type' => 'button',
'size' => 'md',
'weight' => 'solid', // outline
'variant' => 'primary',
'variants' => [
'primary' => 'bg-brand-500'
'secondary' => ''
],
'variantsOutline' => [
'primary' => 'border border-brand-500'
'secondary' => ''
],
'sizes' => [
'xs' => '',
'sm' => '',
'md' => '',
'lg' => '',
'xl' => '',
]
])
{{-- outline? --}}
{{-- outiline
background
{{-- If weight is solid, show variants else variantsoutline --}}
<button type="{{ $type }}" {{ $attributes->merge(['class' => $class . "" . "{$sizes[$size]}" . "" . "{$variants[$variant]}" ]) }}">
{{ $slot ? $label : $slot}}
</button>
What do you think of the direction is is going?
And while yes there might be subjective parts and this and that... we can all agree every button component should have the ability to show text, outline/no-outline, colors, size and change its type.
I want to engeener a button so I can just re-use in other projects, create a small package later on perhaps or something.
Level 7
@Snapey What about maintainability though?
I'm just trying to re-create this https://react-bootstrap.github.io/components/buttons/ its very common to do such component while doing React/front-end
I suppose though, this could easily be done with just CSS actually, so might go back to that instead of using just blade but hmm. If it can be done like that it'll probably be better not to add extra external CSS id assume.
Level 122
@aurelianspodarec I have a couple of button components. Their rigidity stops me keep introducing different variants across the project
Level 7
@Snapey Would you share 2-3 of them please? Trying to get more insight
Level 122
@aurelianspodarec This one is a link
@props(['lg' => false])
@php $padding = $lg ? 'px-4 py-2' : 'px-2 py-1'; @endphp
<a
{{ $attributes->class(
$padding . ' border rounded border-zinc-100 hover:border-zinc-400 hover:shadow hover:bg-zinc-100'
) }}
>{{$slot}}</a>
Level 80
@aurelianspodarec If you add every option including the kitchen sink to a component then yes, it’s going to look unwieldy.
I have a button component with few options:
@props([
'active' => false,
'disabled' => false,
'primary',
])
<button {{ $attributes->class(['btn', $primary ? 'btn-primary' : 'btn-secondary', 'active' => $active])->merge(['disabled' => $disabled, 'type' => 'button']) }}>{{ $slot }}</button>
<x-button primary type="submit">Submit</x-button>
It’s either a “primary” button (using the current brand colour) or a “secondary” button which is usually grey. A good example is this very pop-up message window I’m typing in right here on Laracasts. The “Post” button is blue because it’s the primary action I can take, but there’s also a secondary “Cancel” action button in grey.
1 like
Level 7
@martinbean I see what you mean. What if you wanted to to create say a button that has outline? or a white button, navy button like here https://laracasts.com/series/hands-on-community-contributions
Just looking at laracast code and..
it seems like they might be transitioning to tailwindcss, maybe they'll live the button as it is because why change it...
But it seems like some buttons might be a one off, or either indeed have a separate button component.
Hmmm. Usually in front-end, in code that other mid/senior devs created, there was just one single button that contained all basically, and unless you needed something widely different you'd just code a new one
Level 80
@aurelianspodarec Just because you’re using a CSS framework that has seven button variants doesn’t mean you need to use all seven variants. In my apps, I use “primary” buttons or “secondary” buttons. There’s no need to complicate a design and confuse a user by having blue buttons and yellow buttons and red buttons and green buttons and whatever other colour buttons.
Level 7
@martinbean I understnad that.
But majority projects, including laracast and the one I'm building has different variants of buttons.
Naming primary or secondary isn't hard.
But every button will have outline, solid, and empty/text Every button has a type submit/button
Different buttons have different sizes such as the Post and Cancel here seems to be default size of a button for laracast, above the post you have Minimize probably smaller type of button.
It feels like there is the default.
I only need three variants of a button but they are all going to be a button, going to have same or similar spacing - except maybe a few then could create a new button like you say.
But for your average button that's in majority of the site, you probably want it to be a bit robust, right? Then any stand out button can create a new button for it
Level 80
@aurelianspodarec A UI is as complicated as you make it.
Level 7
@martinbean Yeah, I get it but if you want to have an outline button or solid and its a button you'll use across all page, it would be good to have all of that in one component right.
Though I do agree with you creating new components as well, I'll do that too. I remember times where titles or buttons when doing React Native wouldn't just fit to the default component, that would be a good opportunity to either create a new, or just create a one off HTML/CSS.
So I think you deffo got a point there too.
Please or to participate in this conversation.