<div class="content-section introduction">
  <div class="feature-intro">
    <h1>Button</h1>
    <p>Button is an extension to standard button element with icons and theming.</p>
  </div>
  <app-demoactions>
    <div class="app-demoactions any-d-flex any-ai-end any-jc-end any-mt-3">
      <any-button id="view_on_github" icon="fa-brands:github"
        style-class="any-button-rounded any-button-text any-button-lg any-button-plain"></any-button>
    </div>
  </app-demoactions>
</div>
<div class="content-section">
  <div class="full-card buttons-intro">
    <h5>Basic</h5>
    <any-button label="Submit" id="b1"></any-button>
    <any-button label="Disabled" disabled="true"></any-button>
    <any-button label="Link" style-class="any-button-link"></any-button>
    <h5>Icons</h5>
    <any-button icon="fa-solid:check"></any-button>
    <any-button label="Submit" icon="fa-solid:check"></any-button>
    <any-button label="Submit" icon="fa-solid:check" icon-pos="right"></any-button>
    <h5>Severities</h5>
    <div class="responsive">
      <any-button label="Primary"></any-button>
      <any-button label="Secondary" style-class="any-button-secondary"></any-button>
      <any-button label="Success" style-class="any-button-success"></any-button>
      <any-button label="Info" style-class="any-button-info"></any-button>
      <any-button label="Warning" style-class="any-button-warning"></any-button>
      <any-button label="Help" style-class="any-button-help"></any-button>
      <any-button label="Danger" style-class="any-button-danger"></any-button>
    </div>
    <h5>Raised Buttons</h5>
    <div class="responsive">
      <any-button label="Primary" style-class="any-button-raised"></any-button>
      <any-button label="Secondary" style-class="any-button-raised any-button-secondary"></any-button>
      <any-button label="Success" style-class="any-button-raised any-button-success"></any-button>
      <any-button label="Info" style-class="any-button-raised any-button-info"></any-button>
      <any-button label="Warning" style-class="any-button-raised any-button-warning"></any-button>
      <any-button label="Help" style-class="any-button-raised any-button-help"></any-button>
      <any-button label="Danger" style-class="any-button-raised any-button-danger"></any-button>
    </div>
    <h5>Rounded Buttons</h5>
    <div class="responsive">

      <any-button label="Primary" style-class="any-button-rounded"></any-button>
      <any-button label="Secondary" style-class="any-button-rounded any-button-secondary"></any-button>
      <any-button label="Success" style-class="any-button-rounded any-button-success"></any-button>
      <any-button label="Info" style-class="any-button-rounded any-button-info"></any-button>
      <any-button label="Warning" style-class="any-button-rounded any-button-warning"></any-button>
      <any-button label="Help" style-class="any-button-rounded any-button-help"></any-button>
      <any-button label="Danger" style-class="any-button-rounded any-button-danger"></any-button>
    </div>
    <h5>Text Buttons</h5>
    <div class="responsive">
      <any-button label="Primary" style-class="any-button-text"></any-button>
      <any-button label="Secondary" style-class="any-button-text any-button-secondary"></any-button>
      <any-button label="Success" style-class="any-button-text any-button-success"></any-button>
      <any-button label="Info" style-class="any-button-text any-button-info"></any-button>
      <any-button label="Warning" style-class="any-button-text any-button-warning"></any-button>
      <any-button label="Help" style-class="any-button-text any-button-help"></any-button>
      <any-button label="Danger" style-class="any-button-text any-button-danger"></any-button>
      <any-button label="Plain" style-class="any-button-text any-button-plain"></any-button>
    </div>
    <h5>Raised Text Buttons</h5>
    <div class="responsive">

      <any-button label="Primary" style-class="any-button-raised any-button-text"></any-button>
      <any-button label="Secondary" style-class="any-button-raised any-button-text any-button-secondary"></any-button>
      <any-button label="Success" style-class="any-button-raised any-button-text any-button-success"></any-button>
      <any-button label="Info" style-class="any-button-raised any-button-text any-button-info"></any-button>
      <any-button label="Warning" style-class="any-button-raised any-button-text any-button-warning"></any-button>
      <any-button label="Help" style-class="any-button-raised any-button-text any-button-help"></any-button>
      <any-button label="Danger" style-class="any-button-raised any-button-text any-button-danger"></any-button>
      <any-button label="Plain" style-class="any-button-raised any-button-text any-button-plain"></any-button>
    </div>
    <h5>Outlined Buttons</h5>
    <div class="responsive">

      <any-button label="Primary" style-class="any-button-outlined"></any-button>
      <any-button label="Secondary" style-class="any-button-outlined any-button-secondary"></any-button>
      <any-button label="Success" style-class="any-button-outlined any-button-success"></any-button>
      <any-button label="Info" style-class="any-button-outlined any-button-info"></any-button>
      <any-button label="Warning" style-class="any-button-outlined any-button-warning"></any-button>
      <any-button label="Help" style-class="any-button-outlined any-button-help"></any-button>
      <any-button label="Danger" style-class="any-button-outlined any-button-danger"></any-button>
    </div>
    <h5>Rounded Outlined Buttons</h5>
    <div class="responsive">

      <any-button label="Primary" style-class="any-button-rounded any-button-outlined"></any-button>
      <any-button label="Secondary" style-class="any-button-rounded any-button-outlined any-button-secondary">
      </any-button>
      <any-button label="Success" style-class="any-button-rounded any-button-outlined any-button-success"></any-button>
      <any-button label="Info" style-class="any-button-rounded any-button-outlined any-button-info"></any-button>
      <any-button label="Warning" style-class="any-button-rounded any-button-outlined any-button-warning"></any-button>
      <any-button label="Help" style-class="any-button-rounded any-button-outlined any-button-help"></any-button>
      <any-button label="Danger" style-class="any-button-rounded any-button-outlined any-button-danger"></any-button>
    </div>
    <h5>Rounded Icon Buttons</h5>
    <any-button icon="fa-solid:check" style-class="any-button-rounded "></any-button>
    <any-button icon="fa-solid:bookmark" style-class="any-button-rounded any-button-secondary">
    </any-button>
    <any-button icon="fa-solid:search" style-class="any-button-rounded any-button-success">
    </any-button>
    <any-button icon="fa-solid:user" style-class="any-button-rounded any-button-info">
    </any-button>
    <any-button icon="fa-solid:bell" style-class="any-button-rounded any-button-warning">
    </any-button>
    <any-button icon="fa-solid:heart" style-class="any-button-rounded any-button-help">
    </any-button>
    <any-button icon="fa-solid:times" style-class="any-button-rounded any-button-danger">
    </any-button>
    <h5>Rounded Text Icon Buttons</h5>
    <any-button icon="fa-solid:check" style-class="any-button-rounded any-button-text"></any-button>
    <any-button icon="fa-solid:bookmark" style-class="any-button-rounded any-button-text any-button-secondary">
    </any-button>
    <any-button icon="fa-solid:search" style-class="any-button-rounded any-button-text any-button-success">
    </any-button>
    <any-button icon="fa-solid:user" style-class="any-button-rounded any-button-text any-button-info">
    </any-button>
    <any-button icon="fa-solid:bell" style-class="any-button-rounded any-button-text any-button-warning">
    </any-button>
    <any-button icon="fa-solid:heart" style-class="any-button-rounded any-button-text any-button-help">
    </any-button>
    <any-button icon="fa-solid:times" style-class="any-button-rounded any-button-text any-button-danger">
    </any-button>
    <h5>Rounded and Outlined Icon Buttons</h5>
    <any-button icon="fa-solid:check" style-class="any-button-rounded any-button-outlined"></any-button>
    <any-button icon="fa-solid:bookmark" style-class="any-button-rounded any-button-outlined any-button-secondary">
    </any-button>
    <any-button icon="fa-solid:search" style-class="any-button-rounded any-button-outlined any-button-success">
    </any-button>
    <any-button icon="fa-solid:user" style-class="any-button-rounded any-button-outlined any-button-info">
    </any-button>
    <any-button icon="fa-solid:bell" style-class="any-button-rounded any-button-outlined any-button-warning">
    </any-button>
    <any-button icon="fa-solid:heart" style-class="any-button-rounded any-button-outlined any-button-help">
    </any-button>
    <any-button icon="fa-solid:times" style-class="any-button-rounded any-button-outlined any-button-danger">
    </any-button>
    <h5>Badges</h5>
    <any-button badge="8" label="Emails"></any-button>
    <any-button badge="8" label="Messages" icon="fa-solid:user-friends" style-class="any-button-warning" badge="8"
      badge-class="any-badge-danger">
    </any-button>
    <h5>Loading</h5>
    <any-button class="lb" label="Search" icon="fa-solid:search"></any-button>
    <any-button class="lb" label="Search" icon="fa-solid:search" icon-pos="right"></any-button>
    <any-button class="lb" icon="fa-solid:search"></any-button>
    <any-button class="lb" label="Search"></any-button>
    <h5>Templating</h5>
    <!-- <any-button class="cb">
      
    </any-button> -->
    <any-button class="cb">
      <div slot="content">
        <img alt="logo" src="assets/images/webcomponents-logo.png" style="width: 1.5rem" />
      </div>
    </any-button>
    <any-button class="cb" style-class="any-button-outlined">
      <div slot="content">
        <img alt="logo" src="assets/images/webcomponents-logo.png" style="width: 1.5rem" />
        <span class="any-ml-2 any-text-bold">AnywhereUI</span>
      </div>
    </any-button>
    <h5>Button Set</h5>
    <div class="responsive">

      <span class="any-buttonset">
        <any-button label="Save" icon="fa-solid:check"></any-button>
        <any-button label="Delete" icon="fa-solid:trash-alt"></any-button>
        <any-button label="Cancel" icon="fa-solid:times"></any-button>
      </span>
    </div>
    <h5>Sizes</h5>
    <div class="sizes">
      <any-button label="Small" icon="fa-solid:check" style-class="any-button-sm"></any-button>
      <any-button label="Normal" icon="fa-solid:check" style-class="any-button"></any-button>
      <any-button label="Large" icon="fa-solid:check" style-class="any-button-lg"></any-button>
    </div>
  </div>
</div>
