## Buttons

A simple and versatile button component for seamless interaction in your application.
Demo

Component | Css Variables | Demo
--- | --- | ---
`{{ primaryBtnCode }}` |
--lib-primary-button-text-shadow | 0px 0px 20.000049591064453px #FE3C72, 0px 0px 20.000049591064453px #FE3C72, 0px 0px 4.000010013580322px #FFF;
| Setup availability schedule
`{{ primaryBtnCodeWithLoading }}` |
--lib-primary-button-text-shadow | 0px 0px 20.000049591064453px #FE3C72, 0px 0px 20.000049591064453px #FE3C72, 0px 0px 4.000010013580322px #FFF;
| primary button Hover
`{{ primaryBtnCodeHoverOutline }}` |
--lib-primary-button-text-shadow | 0px 0px 20.000049591064453px #FE3C72, 0px 0px 20.000049591064453px #FE3C72, 0px 0px 4.000010013580322px #FFF;
| primary button Hover
`{{ primaryBtnCodeDisabled }}` |
--lib-primary-button-text-shadow | 0px 0px 20.000049591064453px #FE3C72, 0px 0px 20.000049591064453px #FE3C72, 0px 0px 4.000010013580322px #FFF;
| primary Disabled
`{{ primaryBtnCodesShowArrowIcon }}` |
--lib-primary-button-text-shadow | 0px 0px 20.000049591064453px #FE3C72, 0px 0px 20.000049591064453px #FE3C72, 0px 0px 4.000010013580322px #FFF;
| Primary with Icon
`{{ secondaryBtnCode }}` |
--lib-secondary-button-text-shadow | 0px 0px 47.31624221801758px #FE3C72, 0px 0px 16px #FE3C72
--lib-secondary-button-font-color | #FE638E
| secondary button
`{{ secondaryBtnDisabledCode }}` |
--lib-secondary-button-text-shadow | 0px 0px 47.31624221801758px #FE3C72, 0px 0px 16px #FE3C72
--lib-secondary-button-font-color | #FE638E
| secondary Disabled
`{{ secondaryBtnShowArrowIconCode }}` |
--lib-secondary-button-text-shadow | 0px 0px 47.31624221801758px #FE3C72, 0px 0px 16px #FE3C72
--lib-secondary-button-font-color | #FE638E
| secondary with Icon
`{{ listBtnCode }}` |
--lib-list-button-font-size | 12.872px
--lib-list-button-font-family | 'Gilroy-Regular', serif
--lib-list-button-container-height | 47px
--lib-list-button-height | 36.5px
--lib-list-button-icon-color | #F7416E
--lib-list-button-padding | 7.189px 34.251px 10.018px 18.349px
| List button
`{{ listBtnWithLabelCode }}` |  | With action label
`{{ iconBtnCode }}` |
--lib-icon-button-container-height | 33px
--lib-icon-button-container-width | 33px
--lib-icon-button-height | 30px
--lib-icon-button-width | 30px
--lib-icon-button-border-radius | 50%
Notification Count | 10
`{{ bubbleBtnCode }}` |  |
`{{ btnWithLabelCode }}` |
--lib-button-component-label-radius | 20.162px
--lib-button-component-label-border | 0.504px solid #FFF
--lib-button-component-label-background | rgba(255, 255, 255, 0.44)
--lib-button-component-label-filter | blur(10.081077575683594px)
--lib-button-component-label-color | #A8A8A8
--lib-button-component-label-font | Gilroy-Regular, serif
--lib-button-component-label-font-size | 12px
--lib-button-component-label-padding | 0 10px
| Set advanced preferences
`{{ btnHoverCode }}` |
--lib-hover-button-height | 40px
--lib-hover-button-width | 160px
--lib-hover-icon-button-height | 25px
--lib-hover-icon-button-width | 25px
--lib-hover-icon-left-margin | 6px
--lib-hover-button-font-size | 14px
--lib-hover-button-font-color | #fe3c72
--lib-hover-button-font-family | Gilroy-Regular, serif
| Hover Button
`{{ chipBtnCode }}` |
`{{ illuminateIconBtnCode }}` |
$pulse-from | #fe3c73e3
$pulse-to | #fe3c7300
position | relative
overflow | visible !important
animation | pulse-animate 2s infinite
keyframes pulse-animate (0%) | transform: scale(0.95); box-shadow: 0 0 0 0 #fe3c73e3
keyframes pulse-animate (70%) | transform: scale(1); box-shadow: 0 0 0 10px #fe3c7300
keyframes pulse-animate (100%) | transform: scale(0.95); box-shadow: 0 0 0 0 #fe3c7300

Required Imports
import { ButtonsModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Required
--- | --- | --- | ---
Input | hoverOutline | Determines if the button should display a hover outline effect. | false
Input | disabled | Disables the button if set to true. | false
Input | type | Specifies the button type attribute (e.g., "button" or "submit"). | false
Input | form | The form attribute for associating the button with a form. | false
Input | label | The text label displayed on the button. | false
Input | showArrowIcon | Determines if an arrow icon should be displayed on the button. | false
Input | disableTextShadow | Disables the text shadow effect if set to true. | false
Input | notificationCount | Displays a notification badge with the provided count. | false
Input | loading$ | An observable that controls the button's loading state. | false
Input | illuminateIcon | Determines if the button's icon should be illuminated. | false

CSS Properties

Name | Default Value
--- | ---
--lib-button-font-color | #fff
--lib-button-border-radius | 30.582px
--lib-button-border | 0.917px solid rgba(10, 9, 9, 0.45)
--lib-button-background | linear-gradient(180deg, rgba(62, 64, 69, 0.50) 0%, rgba(62, 64, 69, 0.00) 8.33%), radial-gradient(170.95% 118.01% at 8.39% 32.81%, rgba(67, 64, 70, 0.50) 0%, rgba(41, 37, 45, 0.50) 28.24%, rgba(10, 10, 11, 0.50) 100%);
--lib-button-container-background | linear-gradient(90deg, #353039 0.68%, #29252D 99.45%)
--lib-button-box-shadow | 6.11634px 6.11634px 12.23267px 0px rgba(0, 0, 0, 0.25);
--lib-button-container-height | 50px
--lib-button-height | 48.5px
--lib-button-font-family | 'Calistoga', serif
--lib-button-font-size | 14px
--lib-button-padding | 0 20px
--lib-button-icon-color | #F7416E