fix(buttons): doc paths

Author: xidedix

src/app/views/buttons/buttons/buttons.component.html

@@ -1,6 +1,6 @@
 <c-row ngPreserveWhitespaces>
   <c-col xs="12">
-    <app-docs-callout href="components/buttons" name="Button"></app-docs-callout>
+    <app-docs-callout href="components/button" name="Button"></app-docs-callout>
   </c-col>
   <c-col xs="12">
     <c-card class="mb-4" id="AngularButton">
@@ -14,7 +14,7 @@
           it. CoreUI buttons are used to initialize operations, both in the background or
           foreground of an experience.
         </p>
-        <app-docs-example fragment="AngularButton" href="components/buttons">
+        <app-docs-example fragment="AngularButton" href="components/button">
           <c-row *ngFor="let state of states; index as i" class="align-items-center mb-3">
             <c-col class="mb-3 mb-xl-0" xl="2" xs="12">
               {{state.charAt(0).toUpperCase() + state.slice(1)}}
@@ -44,7 +44,7 @@
         <p class="text-medium-emphasis small">
           You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
         </p>
-        <app-docs-example fragment="AngularButtonWithIcons" href="components/buttons">
+        <app-docs-example fragment="AngularButtonWithIcons" href="components/button">
           <c-row *ngFor="let state of states; index as i" class="align-items-center mb-3">
             <c-col class="mb-3 mb-xl-0" xl="2" xs="12">
               {{state.charAt(0).toUpperCase() + state.slice(1)}}
@@ -83,7 +83,7 @@
           should be given a <code>role=&#34;button&#34;</code> to adequately communicate their
           meaning to assistive technologies such as screen readers.
         </p>
-        <app-docs-example href="components/buttons#button-components">
+        <app-docs-example href="components/button#button-components">
           <a cButton class="me-1" color="primary" routerLink="./">
             Link
           </a>
@@ -107,7 +107,7 @@
           If you need a button, but without the strong background colors. Set
           <code>variant=&#34;outline&#34;</code> prop to remove all background colors.
         </p>
-        <app-docs-example href="components/buttons#outline-buttons">
+        <app-docs-example href="components/button#outline-buttons">
           <c-row *ngFor="let state of states; index as i" class="align-items-center mb-3">
             <c-col class="mb-3 mb-xl-0" xl="2" xs="12">
               {{state.charAt(0).toUpperCase() + state.slice(1)}}
@@ -142,7 +142,7 @@
           If you need a ghost variant of button, set <code>variant=&#34;ghost&#34;</code> prop
           to remove all background colors.
         </p>
-        <app-docs-example href="components/buttons#ghost-buttons">
+        <app-docs-example href="components/button#ghost-buttons">
           <c-row *ngFor="let state of states; index as i" class="align-items-center mb-3">
             <c-col class="mb-3 mb-xl-0" xl="2" xs="12">
               {{state.charAt(0).toUpperCase() + state.slice(1)}}
@@ -177,15 +177,15 @@
           Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code>
           <code>size=&#34;sm&#34;</code> for additional sizes.
         </p>
-        <app-docs-example href="components/buttons#sizes">
+        <app-docs-example href="components/button#sizes">
           <button cButton class="mb-3" color="primary" size="lg">
             Large button
           </button>
           <button cButton class="mb-3" color="secondary" size="lg">
             Large button
           </button>
         </app-docs-example>
-        <app-docs-example href="components/buttons#sizes">
+        <app-docs-example href="components/button#sizes">
           <br>
           <button cButton class="mb-3" color="primary" size="sm">
             Small button
@@ -203,7 +203,7 @@
         <strong>Angular Button</strong> <small>Pill</small>
       </c-card-header>
       <c-card-body>
-        <app-docs-example href="components/buttons#pill-buttons">
+        <app-docs-example href="components/button#pill-buttons">
           <ng-container *ngFor="let color of colors; index as i; last as isLast">
             <button
               *ngIf="!isLast"
@@ -225,7 +225,7 @@
         <strong>Angular Button</strong> <small>Square</small>
       </c-card-header>
       <c-card-body>
-        <app-docs-example href="components/buttons#square">
+        <app-docs-example href="components/button#square">
           <ng-container *ngFor="let color of colors; index as i; last as isLast">
             <button
               *ngIf="!isLast"
@@ -253,7 +253,7 @@
           <code>pointer-events: none</code> applied to, disabling hover and active states from
           triggering.
         </p>
-        <app-docs-example href="components/buttons#disabled-state">
+        <app-docs-example href="components/button#disabled-state">
           <button cButton color="primary" disabled size="lg">
             Primary button
           </button>
@@ -271,11 +271,11 @@
           <code>aria-disabled=&#34;true&#34;</code> attribute to show the state of the component
           to assistive technologies.
         </p>
-        <app-docs-example href="components/buttons#disabled-state">
-          <a cButton color="primary" disabled routerLink="./" size="lg">
+        <app-docs-example href="components/button#disabled-state">
+          <a cButton color="primary" disabled [routerLink]="[]" size="lg">
             Primary link
           </a>
-          <a cButton color="secondary" disabled routerLink="./" size="lg">
+          <a cButton color="secondary" disabled [routerLink]="[]" size="lg">
             Link
           </a>
         </app-docs-example>
@@ -291,7 +291,7 @@
         <p class="text-medium-emphasis small">
           Create buttons that span the full width of a parent—by using utilities.
         </p>
-        <app-docs-example href="components/buttons#block-buttons">
+        <app-docs-example href="components/button#block-buttons">
           <div class="d-grid gap-2">
             <button cButton color="primary">Button</button>
             <button cButton color="primary">Button</button>
@@ -303,7 +303,7 @@
           <code>.d-grid</code> class, thus nullifying the <code>gap-2</code> utility. Resize
           your browser to see them change.
         </p>
-        <app-docs-example href="components/buttons#block-buttons">
+        <app-docs-example href="components/button#block-buttons">
           <div class="d-grid gap-2 d-md-block">
             <button cButton color="primary">Button</button>
             <button cButton color="primary">Button</button>
@@ -314,7 +314,7 @@
           example, for a half-width &#34;block button&#34;, use <code>.col-6</code>. Center it
           horizontally with <code>.mx-auto</code>, too.
         </p>
-        <app-docs-example href="components/buttons#block-buttons">
+        <app-docs-example href="components/button#block-buttons">
           <div class="d-grid gap-2 col-6 mx-auto">
             <button cButton color="primary">Button</button>
             <button cButton color="primary">Button</button>
@@ -326,7 +326,7 @@
           a margin utility on the button to right align the buttons when they&#39;re no longer
           stacked.
         </p>
-        <app-docs-example href="components/buttons#block-buttons">
+        <app-docs-example href="components/button#block-buttons">
           <div class="d-grid gap-2 d-md-flex justify-content-md-end">
             <button cButton class="me-md-2" color="primary">
               Button