Component

GradientButton

A premium button with gradient background. Use for important CTAs and hero sections.

tsx

import { GradientButton } from 'wss3-forge'

Usage

•

Use sparingly for primary call-to-action buttons

•

Great for hero sections and landing pages

•

Avoid using multiple gradient buttons in the same view

•

The gradient uses brand colors for consistency

Examples

With Icon

tsx

1<GradientButton icon={<Rocket20Regular />}>
2  Launch Project
3</GradientButton>

Icon on Right

tsx

1<GradientButton iconRight={<ArrowRight20Regular />}>
2  Get Started
3</GradientButton>

Different Sizes

tsx

1<HStack gap="sm" style={{ alignItems: 'center', flexWrap: 'wrap' }}>
2  <GradientButton size="xs">Extra Small</GradientButton>
3  <GradientButton size="sm">Small</GradientButton>
4  <GradientButton size="md">Medium</GradientButton>
5  <GradientButton size="lg">Large</GradientButton>
6</HStack>

Loading State

tsx

1<GradientButton loading>Processing...</GradientButton>

Disabled State

tsx

1<GradientButton disabled>Unavailable</GradientButton>

Hero Section Example

Start Building Today

Join thousands of developers using Forge

tsx

1<VStack gap="md" style={{ alignItems: 'center', padding: '2rem' }}>
2  <Heading level={2}>Start Building Today</Heading>
3  <Text color="secondary">Join thousands of developers using Forge</Text>
4  <HStack gap="md">
5    <GradientButton size="lg" icon={<Rocket20Regular />}>
6      Get Started Free
7    </GradientButton>
8    <Button variant="secondary" size="lg">
9      View Documentation
10    </Button>
11  </HStack>
12</VStack>

FloatButton

IconButton

Last updated: December 2025