FusionAuth · synedra · Mar 25, 2025 · Aug 30, 2024 · Mar 4, 2025 · Mar 25, 2025
diff --git a/packages/sdk-angular/README.md b/packages/sdk-angular/README.md
@@ -4,14 +4,14 @@ An SDK for using FusionAuth in Angular applications.
 
 -   [Overview](#overview)
 -   [Getting Started](#getting-started)
+  -   [Quickstart](#quickstart)
   -   [Installation](#installation)
 -   [Usage](#usage)
   -   [FusionAuthService](#fusionauthservice)
   -   [Pre-built buttons](#pre-built-buttons)
   -   [State Parameter](#state-parameter)
   -   [SSR](#ssr)
 -   [Known issues](#known-issues)
--   [Quickstart](#quickstart)
 -   [Documentation](#documentation)
 -   [Releases](#releases)
 
@@ -57,6 +57,12 @@ compliant identity server.
 
 ## Getting Started
 
+If you are new to Angular development, you may want to start with the Quickstart guide. If you are already familiar with Angular development, skip to the Configuration section.
+
+### Quickstart
+
+See the [FusionAuth Angular Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-angular-web) for a full tutorial on using FusionAuth and Angular.
+
 ### Installation
 
 NPM:
@@ -183,10 +189,6 @@ The SDK supports Angular applications using SSR. No additional configuration is
 
 None.
 
-## Quickstart
-
-See the [FusionAuth Angular Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-angular-web) for a full tutorial on using FusionAuth and Angular.
-
 ## Documentation
 
 [Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-angular/docs)

diff --git a/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fa-button.scss b/packages/sdk-angular/projects/fusionauth-angular-sdk/src/lib/components/fa-button.scss
@@ -0,0 +1,16 @@
+.fa-button {
+  padding: 16px 16px 13px 16px;
+  border-radius: 8px;
+  background-color: #083b94;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+  color: #fff;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  width: 400px;
+}
diff --git a/...ar-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.scss b/...ar-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.scss
@@ -1,15 +0,0 @@
-.fa-button {
-  padding: 16px 16px 13px 16px;
-  border-radius: 8px;
-  background-color: #083b94;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  font-size: 18px;
-  font-weight: 600;
-  text-align: center;
-  color: #fff;
-  &:hover {
-    cursor: pointer;
-  }
-  width: 400px;
-}

diff --git a/...ular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts b/...ular-sdk/src/lib/components/fusionauth-login.button/fusion-auth-login-button.component.ts
@@ -4,7 +4,7 @@ import { FusionAuthService } from '../../fusion-auth.service';
 @Component({
   selector: 'fa-login',
   templateUrl: './fusion-auth-login-button.component.html',
-  styleUrls: ['./fusion-auth-login-button.component.scss'],
+  styleUrls: ['../fa-button.scss', './fusion-auth-login-button.component.scss']
 })
 export class FusionAuthLoginButtonComponent {
   @Input() state: string | undefined;

diff --git a/...-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.html b/...-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.html
@@ -1,3 +1,3 @@
-<button class="fa-logout-button" (click)="logout()">
-  <span>logout</span>
-</button>
+<button class="fa-button" (click)="logout()">
+  <span>Logout</span>
+</button>
diff --git a/...-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.scss b/...-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.scss
@@ -1,14 +0,0 @@
-.fa-logout-button {
-  padding: 7px 13px;
-  border-radius: 3px;
-  display: block;
-  border: solid 1px #083b94;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  font-size: 12px;
-  text-align: center;
-  color: #083b94;
-  &:hover {
-    cursor: pointer;
-  }
-}

diff --git a/...ar-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts b/...ar-sdk/src/lib/components/fusionauth-logout.button/fusion-auth-logout-button.component.ts
@@ -4,7 +4,7 @@ import { FusionAuthService } from '../../fusion-auth.service';
 @Component({
   selector: 'fa-logout',
   templateUrl: './fusion-auth-logout-button.component.html',
-  styleUrls: ['./fusion-auth-logout-button.component.scss'],
+  styleUrls: ['../fa-button.scss', './fusion-auth-logout-button.component.scss']
 })
 export class FusionAuthLogoutButtonComponent {
   constructor(private fusionAuth: FusionAuthService) {}

diff --git a/.../src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.scss b/.../src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.scss
@@ -1,16 +0,0 @@
-.fa-button {
-  padding: 16px 16px 13px 16px;
-  border-radius: 8px;
-  background-color: #083b94;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
-    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  font-size: 18px;
-  font-weight: 600;
-  text-align: center;
-  color: #fff;
-  &:hover {
-    cursor: pointer;
-  }
-
-  width: 400px;
-}

diff --git a/...dk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.ts b/...dk/src/lib/components/fusionauth-register.button/fusion-auth-register-button.component.ts
@@ -4,7 +4,7 @@ import { FusionAuthService } from '../../fusion-auth.service';
 @Component({
   selector: 'fa-register',
   templateUrl: './fusion-auth-register-button.component.html',
-  styleUrls: ['./fusion-auth-register-button.component.scss'],
+  styleUrls: ['../fa-button.scss', './fusion-auth-register-button.component.scss']
 })
 export class FusionAuthRegisterButtonComponent {
   @Input() state: string | undefined;

diff --git a/packages/sdk-react/README.md b/packages/sdk-react/README.md
@@ -4,6 +4,7 @@ An SDK for using FusionAuth in React applications.
 
 - [Overview](#overview)
 - [Getting Started](#getting-started)
+  - [Quickstart](#quickstart)
   - [Installation](#installation)
   - [Configuration](#configuration)
     - [Configuration with NextJS](#configuration-with-nextjs)
@@ -13,7 +14,6 @@ An SDK for using FusionAuth in React applications.
 	- [Protecting content](#protecting-content)
 	- [UI Components](#ui-components)
 - [Known issues](#known-issues)
-- [Quickstart](#quickstart)
 - [Documentation](#documentation)
 - [Formatting](#formatting)
 - [Releases](#releases)
@@ -61,6 +61,12 @@ compliant identity server.
 
 ## Getting Started
 
+If you are new to React development, you may want to start with the Quickstart guide. If you are already familiar with React development, skip to the Configuration section.
+
+### Quickstart
+
+See the [FusionAuth React Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-react-web) for a full tutorial on using FusionAuth and React.
+
 ### Installation
 
 NPM:
@@ -226,10 +232,6 @@ export const AccountPage = () => (
 
 None.
 
-## Quickstart
-
-See the [FusionAuth React Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-react-web) for a full tutorial on using FusionAuth and React.
-
 ## Documentation
 
 [Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-react/docs)

diff --git a/packages/sdk-vue/README.md b/packages/sdk-vue/README.md
@@ -4,7 +4,8 @@ An SDK for using FusionAuth in Vue applications.
 
 - [Overview](#overview)
 - [Getting Started](#getting-started)
-- [Installation](#installation)
+  - [Quickstart](#quickstart)
+  - [Installation](#installation)
 - [Usage](#usage)
   - [Configuring the SDK](#configuring-the-sdk)
     - [Configuring with Nuxt](#configuring-with-nuxt)
@@ -13,7 +14,6 @@ An SDK for using FusionAuth in Vue applications.
   - [UI Components](#ui-components)
     - [Protecting Content](#protecting-content)
     - [Pre-built buttons](#pre-built-buttons)
-- [Quickstart](#quickstart)
 - [Documentation](#documentation)
 - [Known Issues](#known-issues)
 - [Releases](#releases)
@@ -61,6 +61,12 @@ compliant identity server.
 
 ## Getting Started
 
+If you are new to Vue development, you may want to start with the Quickstart guide. If you are already familiar with Vue development, skip to the Configuration section.
+
+### Quickstart
+
+See the [FusionAuth Vue Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-vue-web) for a full tutorial on using FusionAuth and Vue.
+
 ### Installation
 
 NPM:
@@ -230,10 +236,6 @@ is.
 
 With the CSS variables, you can customize the buttons to match your app’s style.
 
-## Quickstart
-
-See the [FusionAuth Vue Quickstart](https://fusionauth.io/docs/quickstarts/quickstart-javascript-vue-web) for a full tutorial on using FusionAuth and Vue.
-
 ## Documentation
 
 [Full library documentation](https://github.com/FusionAuth/fusionauth-javascript-sdk/tree/main/packages/sdk-vue/docs)