Ynex - Buttons

Default Buttons

{DefaultButtons.map((idx)=>(
                  <Button variant={idx.class} type="button" className="btn-wave">{idx.text}</Button>
                ))}

Rounded Buttons

{DefaultButtons.map((idx)=>(
 <Button variant={idx.class} type="button" className="rounded-pill btn-wave">{idx.text}</Button>
 ))}

Light Buttons

 {LightButtons.map((idx)=>(
 <Button type="button" variant={idx.class} className="btn btn-wave">{idx.text}</Button>
 ))}

Light Rounded Buttons

 {LightButtons.map((idx)=>(
 <Button type="button" variant={idx.class} className="btn rounded-pill btn-wave">{idx.text}</Button>
 ))}

Outline Buttons

{OutlineButtons.map((idx)=>(
 <Button type="button" variant={idx.class} className="btn  btn-wave">{idx.text}</Button>
 ))}

Rounded Outline Buttons

 {OutlineButtons.map((idx)=>(
<Button type="button" variant={idx.class} className="btn rounded-pill  btn-wave">{idx.text}</Button>
))}

Gradient Buttons

{GradientButtons.map((idx)=>(
<Button type="button" variant={idx.class} className="btn btn-wave">{idx.text}</Button>
))}

Rounded Gradient Buttons

{GradientButtons.map((idx)=>(
<Button type="button" variant={idx.class} className="btn rounded-pill btn-wave">{idx.text}</Button>
))}

Ghost Buttons

 {GhostButtons.map((idx)=>(
<Button type="button" variant={idx.class} className="btn btn-wave">{idx.text}</Button>
))}

Button tags

Link

 <Button variant='primary' className="btn  btn-wave" href="#!" role="button">Link</Button>
 <Button variant='secondary' className="btn  btn-wave" type="submit">Button</Button>
 <Button variant='info' as="input" className="btn " type="button" value="Input"/>
 <Button variant='warning' as="input" className="btn" type="submit" value="Submit"/>
 <Button variant='success' as="input" className="btn " type="reset" value="Reset"/>

disabled state with anchor tags

Primary link Link

 <div className="mb-4">
 <Button type="button" variant='primary' className="btn btn-primary" disabled>Primary
     button</Button>
 <Button type="button" variant='secondary' className="btn btn-secondary" disabled>Button</Button>
 <Button type="button" variant='outline-primary' className="btn btn-outline-primary" disabled>Primary
     button</Button>
 <Button type="button" variant='outline-secondary' className="btn btn-outline-secondary" disabled>Button</Button>
</div>
<div>
 <Button variant='primary' className="btn disabled" role="button">Primary
     link</Button>
 <Button variant='secondary' className="btn disabled" role="button">Link</Button>
</div>

button plugin toggle states

Toggle link Active toggle link Disabled toggle link

<div className="mb-4">
<Button type="button" variant='primary' className="btn btn-wave">
Toggle button</Button>
<Button type="button" variant='secondary' active className="btn  btn-wave">
Active toggle button</Button>
<Button type="button" variant='teal' className="btn btn-wave" disabled>
Disabled toggle button</Button>
</div>
<div>
<Button variant='primary' href="#!" className="btn btn-wave" role="button" >Toggle
    link</Button>
<Button href="#!" variant='secondary' active className="btn btn-wave" role="button">
Active toggle link</Button>
<Button variant='teal' className="btn  btn-wave" role="button" disabled>
Disabled toggle link</Button>
</div>

Link functionally caveat

Primary link Link

  <div className="btn-list">
<Button variant='primary' disabled className="btn" tabIndex={-1} role="button">Primary link</Button>
<Button variant='secondary' disabled className="btn" tabIndex={-1} role="button">Link</Button>
 </div>

Loading Buttons

<Button variant='primary' className="btn  btn-loader">
<span className="me-2">Loading</span>
<span className="loading"><i className="ri-loader-2-fill fs-16"></i></span>
 </Button>
 <Button  variant='outline-secondary' className="btn btn-loader">
<span className="me-2">Loading</span>
<span className="loading"><i className="ri-loader-2-fill fs-16"></i></span>
 </Button>
 <Button variant='info-transparent' className="btn  btn-loader">
<span className="me-2">Loading</span>
<span className="loading"><i className="ri-loader-4-line fs-16"></i></span>
 </Button>
 <Button variant='warning-transparent' className="btn  btn-loader">
<span className="me-2">Loading</span>
<span className="loading"><i className="ri-loader-5-line fs-16"></i></span>
 </Button>
 <Button variant='success' className="btn btn-loader" disabled>
<span className="me-2">Disabled</span>
<span className="loading"><i className="ri-refresh-line fs-16"></i></span>
 </Button>

Icon Buttons

 <div className="mb-md-0 mb-2">
 <Button variant="primary" className="btn btn-icon  btn-wave">
     <i className="ri-bank-fill"></i>
 </Button>
 <Button variant="info" className="btn btn-icon  btn-wave">
     <i className="ri-medal-line"></i>
 </Button>
 <Button variant="danger" className="btn btn-icon  btn-wave">
     <i className="ri-archive-line"></i>
 </Button>
 <Button variant="warning" className="btn btn-icon  btn-wave me-5">
     <i className="ri-calendar-2-line"></i>
 </Button>
</div>

<div className="mb-md-0 mb-2">
 <Button variant="primary-transparent" className="btn btn-icon rounded-pill btn-wave">
     <i className="ri-home-smile-line"></i>
 </Button>
 <Button variant="secondary-transparent" className="btn btn-icon  rounded-pill btn-wave">
     <i className="ri-delete-bin-line"></i>
 </Button>
 <Button variant="success-transparent" className="btn btn-icon  rounded-pill btn-wave">
     <i className="ri-notification-3-line"></i>
 </Button>
 <Button variant="danger-transparent" className="btn btn-icon  rounded-pill btn-wave me-5">
     <i className="ri-chat-settings-line"></i>
 </Button>
  </div>

  <div className="">
 <Button variant="outline-primary" className="btn btn-icon  rounded-pill btn-wave">
     <i className="ri-phone-line"></i>
 </Button>
 <Button variant="outline-teal" className="btn btn-icon  rounded-pill btn-wave">
     <i className="ri-customer-service-2-line"></i>
 </Button>
 <Button variant="outline-success" className="btn btn-icon  rounded-pill btn-wave">
     <i className="ri-live-line"></i>
 </Button>
 <Button variant="outline-secondary" className="btn btn-icon  rounded-pill btn-wave">
     <i className="ri-save-line"></i>
 </Button>
  </div>

Social Buttons

<Button className="btn btn-icon btn-facebook btn-wave">
<i className="ri-facebook-line"></i>
</Button>
<Button className="btn btn-icon btn-twitter btn-wave">
 <i className="ri-twitter-line"></i>
 </Button>
 <Button className="btn btn-icon btn-instagram btn-wave">
<i className="ri-instagram-line"></i>
 </Button>
 <Button className="btn btn-icon btn-github btn-wave">
     <i className="ri-github-line"></i>
 </Button>
 <Button className="btn btn-icon btn-youtube btn-wave">
     <i className="ri-youtube-line"></i>
 </Button>
 <Button className="btn btn-icon btn-google btn-wave">
     <i className="ri-google-line"></i>
 </Button>

Sizes

<Button type="button" variant='primary' className="btn  btn-sm btn-wave">Small button</Button>
<Button type="button" variant='secondary' className="btn  btn-wave">Default button</Button>
<Button type="button" variant='success' className="btn  btn-lg btn-wave">Large button</Button>

Button Widths

<Button type="button" variant='primary' className="btn btn-w-xs btn-wave">XS</Button>
<Button type="button" variant='secondary' className="btn btn-w-sm btn-wave">SM</Button>
<Button type="button" variant='warning' className="btn btn-w-md btn-wave">MD</Button>
<Button type="button" variant='info' className="btn btn-w-lg btn-wave">LG</Button>

Buttons With Different Shadows

 <div className="me-5">
 <Button variant='primary' className="btn  shadow-sm btn-wave">Button</Button>
 <Button variant='primary' className="btn btn-primary shadow btn-wave">Button</Button>
 <Button variant='primary' className="btn btn-primary shadow-lg btn-wave">Button</Button>
</div>
<div>
 <Button variant='secondary' className="btn  btn-sm shadow-sm btn-wave">Button</Button>
 <Button variant='info' className="btn  shadow btn-wave">Button</Button>
 <Button variant='success' className="btn btn-lg  shadow-lg btn-wave">Button</Button>
</div>

Different Colored Buttons With Shadows

 <Button variant='primary' className="btn shadow-primary btn-wave">Button</Button>
<Button variant='secondary' className="btn shadow-secondary btn-wave">Button</Button>
<Button variant='success' className="btn shadow-success btn-wave">Button</Button>
<Button variant='info' className="btn shadow-info btn-wave">Button</Button>
<Button variant='warning' className="btn shadow-warning btn-wave">Button</Button>
<Button variant='danger' className="btn shadow-danger btn-wave">Button</Button>
<Button variant='purple' className="btn shadow-purple btn-wave">Button</Button>
<Button variant='orange' className="btn shadow-orange btn-wave">Button</Button>

Raised Buttons

  {ColoredButtons.map((idx)=>(
<Button variant={idx.class} className="btn  btn-raised-shadow btn-wave" key={Math.random()}>Button</Button>
))}

Label Buttons

  <div className="btn-list">
 <Button className="btn btn-primary label-btn">
     <i className="ri-   -line label-btn-icon me-2"></i>
     Primary
 </Button>
 <Button className="btn btn-secondary label-btn">
     <i className="ri-settings-4-line label-btn-icon me-2"></i>
     Secondary
 </Button>
 <Button className="btn btn-warning label-btn rounded-pill">
     <i className="ri-spam-2-line label-btn-icon me-2 rounded-pill"></i>
     Warning
 </Button>
 <Button className="btn btn-info label-btn rounded-pill">
     <i className="ri-phone-line label-btn-icon me-2 rounded-pill"></i>
     Info
 </Button>
 <Button className="btn btn-success label-btn label-end">
     Success
     <i className="ri-thumb-up-line label-btn-icon ms-2"></i>
 </Button>
 <Button className="btn btn-danger label-btn label-end rounded-pill">
     Cancel
     <i className="ri-close-line label-btn-icon ms-2 rounded-pill"></i>
 </Button>
</div>

Custom Buttons

 <div className="btn-list">
<Button variant='info' className="btn  custom-button rounded-pill"><span className="custom-btn-icons">
<i className="ri-twitter-line text-info"></i></span>Twitter</Button>
<Button variant='teal-light' className="btn  btn-border-down">Border</Button>
<Button variant='secondary-light' className="btn  btn-border-start">Border</Button>
<Button variant='purple-light' className="btn  btn-border-end">Border</Button>
<Button variant='warning-light' className="btn  btn-border-top">Border</Button>
<Button variant='secondary' className="btn  btn-glare"><span>Glare Button</span></Button>
<Button variant='danger' className="btn  btn-hover btn-hover-animate">Like</Button>
<Button variant='success' className="btn  btn-darken-hover">Hover</Button>
<Button variant='orange' className="btn  btn-custom-border">Hover</Button>
</div>

Block buttons

<div className="d-grid gap-2 mb-4">
<Button variant='primary' className="btn  btn-wave" type="button">Button</Button>
<Button variant='secondary' className="btn  btn-wave" type="button">Button</Button>
  </div>
  <div className="d-grid gap-2 d-md-block">
<Button variant='info' className="btn  btn-wave" type="button">Button</Button>
<Button variant='success' className="btn  btn-wave" type="button">Button</Button>
  </div>
  <div className="d-grid gap-2 col-6 mx-auto">
<Button variant='danger' className="btn  btn-wave" type="button">Button</Button>
<Button variant='warning' className="btn  btn-wave" type="button">Button</Button>
  </div>
  <div className="d-grid gap-2 d-md-flex justify-content-md-end">
<Button variant='teal' className="btn me-md-2 btn-wave" type="button">Button</Button>
<Button variant='purple' className="btn  btn-wave" type="button">Button</Button>
  </div>

Switcher

Buttons