Component

Button

Buttons trigger actions and events. Use the variant prop to change the visual style.

tsx

import { Button } from 'wss3-forge'

Usage

•

Use primary buttons for main actions like "Save", "Submit", "Confirm"

•

Use secondary buttons for less important actions

•

Use ghost buttons for tertiary actions or in toolbars

•

Use danger buttons for destructive actions like "Delete"

•

Add icons to improve visual recognition of actions

Examples

With Icon

tsx

1<Button icon={<Add20Regular />}>Add Item</Button>

Loading State

tsx

1<Button loading>Saving...</Button>

Full Width

tsx

1<Button fullWidth>Submit Form</Button>

Different Sizes

tsx

1<HStack gap="sm">
2  <Button size="xs">Extra Small</Button>
3  <Button size="sm">Small</Button>
4  <Button size="md">Medium</Button>
5  <Button size="lg">Large</Button>
6</HStack>

Disabled State

tsx

1<Button disabled>Disabled Button</Button>

Button Group

tsx

1<HStack gap="sm">
2  <Button variant="secondary">Cancel</Button>
3  <Button variant="primary">Save</Button>
4</HStack>

Components Overview

FloatButton

Last updated: December 2025