Types
Description
This component is used to create buttons with different styles and sizes.
You can use icons with the icon component, the library will take care of the spacing between the icon and the text and the icon size.
API
View the default configuration for this component. Learn more about global configuration.
import { LuiButtonModule } from '@lqvrent-workspace/lqvrent-ui/button';<button type="button" lui-button>Button</button>[lui-button]
| Property | Description | Type | Default |
|---|---|---|---|
[luiType] | Type of the button | 'primary' | 'secondary' | 'soft' | secondary |
[luiShape] | Shape of the button | 'rounded' | 'default' | defined in config |
[luiSize] | Size of the button | 'small' | 'default' | 'large' | defined in config |
[luiClass] | Styling class for the button | string | defined in config for each type |
[luiBlock] | Weither the button fits the parent | boolean | false |
[luiLoading] | Weither the button is loading (and disabled) | boolean | false |
[disabled] | Weither the button is disabled | boolean | false |
lui-button-group
| Property | Description | Type | Default |
|---|---|---|---|
[luiDirection] | Direction of the group | 'horizontal' | 'vertical' | horizontal |
[luiSize] | Size of the buttons. Passing luiSize to children won't affect them | 'small' | 'default' | 'large' | defined in config |
More examples
Shapes
Sizes
Block
Icons
Disabled
Loading
The loading state adds a spinner to the button. The spinner will replace the leading icon or only icon if they are present. It will also disable the button.
Danger
For "danger" buttons, you should create a new component that overrides the global configuration, similar to the example provided. You can apply the same approach for other button types such as "success," "warning," etc.
The most effective method is to substitute every instance of red with another Tailwind color class.
Button group
If you want to edit the size of the button, you MUST apply luiSize directly to the group element, not to the button elements.