Sign in with Flowsta Buttons

Official "Sign in with Flowsta" button assets for your website or app.

Button Variants

We provide 6 button variants in multiple formats:

Dark Buttons (for light backgrounds)

• Dark Pill - Rounded corners, dark background
• Dark Rectangle - Square corners, dark background

Light Buttons (for dark backgrounds)

• Light Pill - Rounded corners, light background
• Light Rectangle - Square corners, light background

Neutral Buttons (works on any background)

• Neutral Pill - Rounded corners, neutral colors
• Neutral Rectangle - Square corners, neutral colors

Available Formats

All buttons are available in three formats:

• SVG - Vector format, scalable without quality loss (recommended)
• 1x PNG - Standard resolution (175×40px)
• 2x PNG - High DPI/Retina displays (350×80px)

Download Buttons

Dark Pill

SVG | 1x PNG | 2x PNG

Dark Rectangle

SVG | 1x PNG | 2x PNG

Light Pill

SVG | 1x PNG | 2x PNG

Light Rectangle

SVG | 1x PNG | 2x PNG

Neutral Pill

SVG | 1x PNG | 2x PNG

Neutral Rectangle

SVG | 1x PNG | 2x PNG

Using the Buttons

Building with React, Vue, Qwik, or vanilla JavaScript? Use the @flowsta/login-button package - it ships these same assets as ready-made components with PKCE and the OAuth redirect built in.

The options below are for using the raw assets directly.

Direct Download (Static HTML)

Download a button above, host it yourself, and link it to your OAuth authorization URL:

<a href="YOUR_AUTH_URL">
  <img src="flowsta_signin_web_dark_pill.svg" alt="Sign in with Flowsta" width="175" height="40">
</a>

You'll need to construct the OAuth URL manually - see OAuth URL Construction below and the OAuth guide.

Hotlink

Link directly to our hosted buttons:

<a href="YOUR_AUTH_URL">
  <img src="https://docs.flowsta.com/buttons/svg/flowsta_signin_web_dark_pill.svg" 
       alt="Sign in with Flowsta" 
       width="175" 
       height="40">
</a>

Button Guidelines

Size Recommendations

• Minimum size: 175×40px (1x)
• Retina displays: 350×80px (2x)
• Responsive: Use SVG for automatic scaling

Do's ✅

• Use official button assets
• Maintain aspect ratio (175:40)
• Ensure sufficient contrast with background
• Add appropriate alt text for accessibility

Don'ts ❌

• Don't modify button colors or design
• Don't stretch or distort the button
• Don't add custom text to the button
• Don't use low-resolution versions for large displays

OAuth URL Construction

All buttons should link to the Flowsta authorization URL:

https://login.flowsta.com/login?
  client_id=YOUR_CLIENT_ID
  &redirect_uri=https://yoursite.com/callback
  &response_type=code
  &scope=openid+email+display_name
  &state=RANDOM_STATE
  &code_challenge=PKCE_CHALLENGE
  &code_challenge_method=S256

The state and PKCE parameters must be generated fresh per login. If you'd rather not build this by hand, @flowsta/login-button generates the URL for you - see the OAuth Quickstart for a complete implementation guide.

License

These button assets are provided for use with Flowsta authentication. You may use them in any application that integrates with Flowsta.