LogoutButton

A pre-styled button component for logging out the current user.

Import

import { LogoutButton } from "@use-glyph/sdk-react";

Usage

INFO

To use the LogoutButton component, you need to import the styles.

main.tsx

import "@use-glyph/sdk-react/style.css";

style.css

@import "@use-glyph/sdk-react/style.css";

import { LogoutButton } from "@use-glyph/sdk-react";
import { GlyphProvider } from "@use-glyph/sdk-react";

function App() {
	return (
		<GlyphProvider>
			<LogoutButton />
		</GlyphProvider>
	);
}

Props

The LogoutButton component does not accept any props. It automatically handles the logout process and displays appropriate loading states.

States

The button automatically handles different states:

• Default: Shows "Sign out" or similar text
• Loading: Shows a loading spinner when the logout process is in progress
• Hidden/Disabled: Button is not visible or is disabled when the user is not authenticated

Example in User Profile

import { LogoutButton } from "@use-glyph/sdk-react";
import { useGlyph } from "@use-glyph/sdk-react";

function UserProfile() {
	const { authenticated, user } = useGlyph();

	if (!authenticated) {
		return <p>Please sign in to view your profile</p>;
	}

	return (
		<div className="user-profile">
			<h2>Welcome, {user?.name}</h2>
			<div className="profile-details">{/* User profile information */}</div>
			<div className="profile-actions">
				<LogoutButton />
			</div>
		</div>
	);
}

Example in Navigation Bar

import { LogoutButton, LoginButton } from "@use-glyph/sdk-react";
import { useGlyph } from "@use-glyph/sdk-react";

function NavigationBar() {
	const { authenticated, user } = useGlyph();

	return (
		<nav className="main-nav">
			<div className="nav-logo">My App</div>
			<div className="nav-links">
				<a href="/">Home</a>
				<a href="/features">Features</a>
				<a href="/pricing">Pricing</a>
			</div>
			<div className="nav-auth">
				{authenticated ? (
					<div className="user-menu">
						<span>Hello, {user?.name}</span>
						<LogoutButton />
					</div>
				) : (
					<LoginButton />
				)}
			</div>
		</nav>
	);
}

Styling

The button uses Tailwind CSS classes prefixed with gw- to avoid conflicts with your application's styles. The default styling includes:

• Primary color background
• White text
• Rounded corners
• Consistent padding and height

You can target these classes in your CSS to customize the appearance further.

Custom Logout Button

If you need more control over the logout process or button appearance, you can create a custom logout button using the useGlyph hook:

import { useGlyph } from "@use-glyph/sdk-react";

function CustomLogoutButton() {
	const { logout, authenticated } = useGlyph();

	if (!authenticated) {
		return null;
	}

	return (
		<button onClick={logout} className="your-custom-button-class">
			Sign Out
		</button>
	);
}