Inspired by Nova Button (https://github.com/dillingham/nova-button) but only focus on displaying HTML Links and allowing all attributes to be passed.
composer require monaye/simple-link-button
use Monaye\SimpleLinkButton\SimpleLinkButton;
public function fields(Request $request)
{
return [
SimpleLinkButton::make('Google', 'https://google.com'),
];
}
Default type of the button is fill
& default style is primary
.
type and style can be mismatch.
SimpleLinkButton::make('Google', 'https://google.com')->type('fill'),
SimpleLinkButton::make('Google', 'https://google.com')->type('outline'),
SimpleLinkButton::make('Google', 'https://google.com')->type('link'),
SimpleLinkButton::make('Google', 'https://google.com')->style('primary'),
SimpleLinkButton::make('Google', 'https://google.com')->style('success'),
SimpleLinkButton::make('Google', 'https://google.com')->style('warning'),
SimpleLinkButton::make('Google', 'https://google.com')->style('danger'),
SimpleLinkButton::make('Google', 'https://google.com')->style('info'),
SimpleLinkButton::make('Google', 'https://google.com')->style('grey'),
Mismatch type and style.
SimpleLinkButton::make('Google', 'https://google.com')
->type('outline') // fill, outline, link
->style('danger'), // primary, success, warning, danger, info, grey
All the style class is defined in the configuration file.
php artisan vendor:publish --tag=simple-link-button
// config/simple-link-button.php
'buttons' => [
'fill' => [
// Fill
'primary' => 'dim btn btn-default btn-primary',
'success' => 'dim btn btn-default bg-success text-white',
'warning' => 'dim btn btn-default bg-warning text-white',
'danger' => 'dim btn btn-default bg-danger text-white',
'info' => 'dim btn btn-default bg-info text-white',
'grey' => 'dim btn btn-default bg-60 text-white',
],
'outline' => [
// Outline
'primary' => 'dim btn btn-default border border-primary text-primary',
'success' => 'dim btn btn-default border border-success text-success',
'warning' => 'dim btn btn-default border border-warning text-warning ',
'danger' => 'dim btn btn-default border border-danger text-danger ',
'info' => 'dim btn btn-default border border-info text-info ',
'grey' => 'dim btn btn-default border border-60 text-80 ',
],
'link' => [
// Link
'primary' => 'dim btn btn-link text-primary',
'success' => 'dim btn btn-link text-success',
'warning' => 'dim btn btn-link text-warning',
'danger' => 'dim btn btn-link text-danger',
'info' => 'dim btn btn-link text-info',
'grey' => 'dim btn btn-link text-80',
],
]
Just add additional config to define your own type
and style
// config/simple-link-button.php
'buttons' => [
...
'myown' => [
'primary' => 'dim btn btn-default bg-90 text-white',
'neutral' => 'dim btn btn-default bg-30 text-70',
]
SimpleLinkButton::make('Google', 'https://google.com')
->type('myown'), // default to primary style
SimpleLinkButton::make('Google', 'https://google.com')
->type('myown')
->style('neutral'),
You can show or hide the button by passing boolean to the visible
method.
SimpleLinkButton::make('Google', 'https://google.com')->visible($this->is_active == false),
SimpleLinkButton::make('Google', 'https://google.com')->visible($this->is_active == true),
If you need to dynamically pass the class, pass class name to the classes
method. Notes: classes
method will overwrite the type
and style
classes.
SimpleLinkButton::make('Google', 'https://google.com')->classes('my-own-class second-class'),
// to add additional class you will need to combine with pre config classes
// get classes from config file out slide of
$defaultClasses = Arr::get(config('simple-link-button'), "buttons.fill.primary")
// add additional class
SimpleLinkButton::make('Google', 'https://google.com')->classes("myClass ${defaultClass}"),
You are free to pass any attributes to the HTML Link by passing key => value
array to the attributes
method.
SimpleLinkButton::make('Google', 'https://google.com')->attributes(['target' => '_blank']),
SimpleLinkButton::make('Download Pic', '/my-image.png')->attributes(['download'=>'download-image.png', 'title' => 'Download Image']),
Hope you find it useful. Feel free to reach out with feedback.
Follow me on twitter: @winmonaye
This package is heavily influenced by the https://github.com/dillingham/nova-button. If you need more robust feature please checkout the original package.