Grey Button
Description
The Grey Button component is a customizable button based on the Mary UI button component. It offers different styles including default, outline, and flat variations, as well as multiple size options. The button uses a grey color scheme by default, with hover effects that can change its appearance.
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. |
| attributes | array | [] | Additional HTML attributes to be applied to the button. |
| slot | string | "" | The content to be displayed within the button. |
| class | string | Dynamically generated based on props | The CSS classes applied to the button. These are generated based on the provided props. |
Example
<x-uxlibrary.buttons.grey-button label="Grey Button" />
<x-uxlibrary.buttons.grey-button label="Grey Button" outline />
<x-uxlibrary.buttons.grey-button label="Grey Button" flat />
