Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

quickee's avatar

Laravel 10 building a extendable button component for multiple options

I'd like to continue to follow a pattern i'm implementing for alerts. The problem with buttons there are many varying options. Button options include size, color and a few other things.

#my Alert structure

/Alerts
 /Default
  index.blade.php
  primary.blade.php
  secondary.blade.php
 /Dismissing
  index.blade.php
  primary.blade.php
  secondary.blade.php
 /Custom
  ...
  ...

#heres some examples how I call my alerts. I like doing it this way for a few reason. One making it easy for other devs to see what quick color options are avaliable to use.

<x-alerts.default.primary text="foo"/>
<x-alerts.default.secondary text="foo"/>
<x-alerts.default.warning text="foo"/>
<x-alerts.default.danger text="foo"/>
<x-alerts.dismissing.primary text="foo"/>
<x-alerts.dismissing.secondarytext="foo"/>
#.. list goes on....

#example of my one of my alert comps. They are all the same except classes have been added to chagge text color and background color etc... They will call their respective folder index.blade.php file

default/primary.blade.php ->calling index.blade.php

<x-alerts.default class="alert-primary" {{ $attributes }} />

#index.blade.php example #you can see im sort of just wrapping and extending or decorating with more classes

@props([
    'text'=>'add your text'
    ,'id'=>null
    ])
<div {{ $attributes->merge(
['class' => 'alert'
,'id' => $id ?? uniqid()
]) }} {{ $attributes }} role="alert">
{{ $text }} 
</div>

#so the problem i run into with buttons is there is more than just a couple options. I'd like to be able to render my buttons using something like without having to have a directory tree

#dont want a folder struture like this for buttons
/Buttons
 /Default
  index.blade.php
  sm.primary.blade.php
  md.primary.blade.php
  sm.secondary.blade.php
  md.secondary.blade.php
 /Outline
   index.blade.php
   sm.primary.blade.php
   md.primary.blade.php
   sm.secondary.blade.php
   md.secondary.blade.php

<x-buttons.sm.default.primary text="foo"/>
<x-buttons.sm.default.secondary text="foo"/>
<x-buttons.sm.default.warning text="foo"/>
<x-buttons.md.default.primary text="foo"/>
<x-buttons.md.default.secondary text="foo"/>
<x-buttons.md.default.warning text="foo"/>

<x-buttons.sm.outline.primary text="foo"/>
<x-buttons.sm.outline.secondary text="foo"/>
<x-buttons.sm.outline.warning text="foo"/>
<x-buttons.md.outline.primary text="foo"/>
<x-buttons.md.outline.secondary text="foo"/>
<x-buttons.md.outline.warning text="foo"/>

#Im trying to avoid passing in the options like this

@props([
color=>"primary"
,base=>"default"
,size=>"size"
])

@php
//having look up array for classes here
@endphp

Anyways does anyone have suggestion on this or how they create components like this? Thanks

0 likes
4 replies
LaryAI's avatar
LaryAI
AI
3 years ago
Level 58

One solution could be to use a single button component and pass in the necessary options as attributes. The component can then use these attributes to generate the appropriate classes for the button. Here's an example implementation:

<!-- Button component -->
@props([
    'color' => 'primary',
    'size' => 'md',
    'outline' => false,
    'text' => 'Button',
])

@php
    $classes = [
        'btn',
        "btn-$size",
        "btn-$color",
    ];

    if ($outline) {
        $classes[] = 'btn-outline';
    }
@endphp

<button {{ $attributes->merge(['class' => implode(' ', $classes)]) }}>
    {{ $text }}
</button>

With this implementation, you can use the button component like this:

<!-- Examples of using the button component -->
<x-button color="primary" size="sm" text="Small Primary Button" />
<x-button color="secondary" size="md" text="Medium Secondary Button" outline />
<x-button color="warning" size="lg" text="Large Warning Button" />

This approach allows for a more flexible and extensible button component without the need for a complex directory structure.

quickee's avatar

if any one else has suggestions that would be great, i have something similar to what the AI suggested. theres alot of if/else if in that component because of all the different variations. thanks

mwbs's avatar

@quickee hi - did you ever come up with a solution for your issue or puzzle it out on your own?

Please or to participate in this conversation.