Square Button
Description
The Square Button component is a versatile, icon-based button that can be customized in size, style, and behavior. It supports various states including outline and flat, different sizes, and can function as either a button or a link.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| outline | boolean | false | When set to true, applies an outline style to the button. |
| flat | boolean | false | When set to true, applies a flat style to the button. |
| xs | boolean | false | When set to true, applies extra small (xs) size to the button. |
| sm | boolean | false | When set to true, applies small (sm) size to the button. |
| lg | boolean | false | When set to true, applies large (lg) size to the button. |
| xl | boolean | false | When set to true, applies extra large (xl) size to the button. |
| icon | string | plus | The name of the icon to be displayed in the button. This should correspond to an icon file in the components.uxlibrary.icons directory. |
| link | string|null | null | If provided, turns the button into a link with the given URL. |
| attributes | array | [] | Additional HTML attributes to be applied to the button or link element. |
Example
<x-uxlibrary.buttons.square-button icon="plus-small" />
<x-uxlibrary.buttons.square-button icon="plus-small" link="{{ route('uxlibrary.square-button') }}" />
<x-uxlibrary.buttons.square-button icon="minus" link="{{ route('uxlibrary.square-button') }}" sm />
<x-uxlibrary.buttons.square-button icon="plus-small" link="{{ route('uxlibrary.square-button') }}" xl />
