Glyph

Appearance

SignUpButton ​

A pre-styled button component specifically for taking a user to the Glyph Portal/Dashboard. It can be used for new user registration on the dashboard instead of the current app.

WARNING

It is important to note that the login flow is capable in itself to onboard new users without leaving your application. Do not get confused with the naming of the component - it is called SignUpButton but it just takes the user to the Glyph Portal/Dashboard where they can have a complete onboarding experience.

Import ​

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

Usage ​

INFO

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

tsx
import "@use-glyph/sdk-react/style.css";
css
@import "@use-glyph/sdk-react/style.css";
tsx
import { SignUpButton } from "@use-glyph/sdk-react";
import { GlyphProvider } from "@use-glyph/sdk-react";

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

Props ​

The SignUpButton component does not accept any props. It just takes you to the Glyph Portal/Dashboard.

States ​

The button automatically handles different states:

  • Default: Shows "Visit Glyph Portal" with the Glyph icon

Example ​

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

function AuthOptions() {
	const { authenticated } = useGlyph();

	if (authenticated) {
		return (
			<div>
				<p>You are already signed in!</p>

				<div>
					<p>Click below to go to the Glyph Portal/Dashboard.</p>
					<SignUpButton />
				</div>
			</div>
		);
	}

	return (
		<div className="auth-options">
			<div className="auth-option">
				<h3>Login or signup with your Glyph account</h3>
				<LoginButton />
			</div>
			<div className="auth-option">
				<h3>Another option is to register via the Glyph Dashboard.</h3>
				<SignUpButton />
			</div>
		</div>
	);
}

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
  • Glyph icon in a circular background
  • Consistent padding and height

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

Custom Sign Up Button ​

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

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

function CustomSignUpButton() {
	const { glyphUrl } = useGlyph();
	const signupUrl = new URL("/", glyphUrl).toString();

	const handleSignUp = () => {
		window.open(signupUrl, "_blank");
	};

	return (
		<button onClick={handleSignUp} className="your-custom-button-class">
			{!glyphUrl ? "Loading..." : "Take me to the Glyph Portal/Dashboard"}
		</button>
	);
}