Button

The Button component is a fundamental interactive element in the GT Design System. It supports multiple variants, sizes, and states to cover various use cases across GT Alumni applications.

Import

import { Button } from '@gtalumni-la/react';

Basic Usage

import { Button } from '@gtalumni-la/react';

function MyComponent() {
  return <Button variant="primary">Primary Button</Button>;
}

Variants

The Button component supports three visual variants:

Primary

The primary variant uses GT Gold and should be used for the main action in a section.

<Button variant="primary">Primary</Button>

Secondary

The secondary variant uses GT Navy and should be used for secondary actions.

<Button variant="secondary">Secondary</Button>

Outline

The outline variant provides a subtle option with a border and transparent background.

<Button variant="outline">Outline</Button>

Sizes

The Button component supports three sizes:

Small

<Button size="sm">Small Button</Button>

Medium (Default)

<Button size="md">Medium Button</Button>

Large

<Button size="lg">Large Button</Button>

States

Disabled

<Button disabled>Disabled Button</Button>

With Icon

<Button>
  <>
    <span style={{ marginRight: '8px' }}>📧</span>
    Send Email
  </>
</Button>

API Reference

ButtonProps

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
}

Props

Prop	Type	Default	Description
children	React.ReactNode	-	The content of the button
variant	'primary' | 'secondary' | 'outline'	'primary'	The visual style variant
size	'sm' | 'md' | 'lg'	'md'	The size of the button
disabled	boolean	false	Whether the button is disabled
onClick	(event: MouseEvent) => void	-	Click event handler
type	'button' | 'submit' | 'reset'	'button'	The button type

All other HTML button attributes are also supported.

Examples

All Variants Together

<div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
</div>

All Sizes Together

<div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</div>

Form Usage

<form onSubmit={handleSubmit}>
  <Button type="submit" variant="primary">
    Submit Form
  </Button>
  <Button type="button" variant="secondary" onClick={handleCancel}>
    Cancel
  </Button>
</form>

Accessibility

The Button component follows accessibility best practices:

• Keyboard Navigation: Fully accessible via keyboard (Tab, Enter, Space)
• Screen Readers: Proper semantic button element with accessible labels
• Focus Management: Clear focus indicators and logical tab order
• ARIA Support: Proper ARIA attributes for enhanced screen reader support

Accessibility Guidelines

• Use descriptive button text that explains the action
• Avoid using only icons without text labels
• Ensure sufficient color contrast (automatically handled by design tokens)
• Test with keyboard navigation and screen readers

// Good: Descriptive text
<Button>Save Changes</Button>

// Better: With additional context for screen readers
<Button aria-label="Save changes to user profile">
  Save
</Button>

// Best: Icon with text
<Button>
  <SaveIcon aria-hidden="true" />
  Save Changes
</Button>

Design Tokens

The Button component uses the following design tokens:

• Colors: --gt-color-primary-gold, --gt-color-primary-navy, --gt-color-neutral-white
• Spacing: --gt-spacing-2, --gt-spacing-3, --gt-spacing-4, --gt-spacing-6
• Typography: --gt-font-size-sm, --gt-font-size-base, --gt-font-size-lg

Real-World Usage Examples

The Button component includes comprehensive Storybook examples covering common use cases:

Form Actions

<div style={{ display: 'flex', gap: '12px' }}>
  <Button variant="primary" type="submit">
    Save Changes
  </Button>
  <Button variant="outline" type="button">
    Cancel
  </Button>
  <Button variant="secondary" type="button">
    Save Draft
  </Button>
</div>

Navigation Flow

<div style={{ display: 'flex', gap: '12px' }}>
  <Button variant="primary">
    <span style={{ marginRight: '8px' }}>→</span>
    Next Step
  </Button>
  <Button variant="outline">
    <span style={{ marginRight: '8px' }}>←</span>
    Previous
  </Button>
</div>

Loading States

<Button variant="primary" disabled={loading} onClick={handleSubmit}>
  {loading ? (
    <>
      <span style={{ marginRight: '8px' }}>⟳</span>
      Loading...
    </>
  ) : (
    'Submit Form'
  )}
</Button>

Responsive Layout

<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
  <Button style={{ width: '100%' }} variant="primary">
    Full Width Button
  </Button>
  <div style={{ display: 'flex', gap: '8px' }}>
    <Button style={{ flex: 1 }} variant="secondary">
      Flexible
    </Button>
    <Button style={{ flex: 1 }} variant="outline">
      Buttons
    </Button>
  </div>
</div>

Button Groups

<div
  style={{
    display: 'flex',
    border: '1px solid #e5e5e5',
    borderRadius: '6px',
    overflow: 'hidden',
  }}
>
  <Button variant="outline" style={{ borderRadius: '0', borderRight: 'none' }}>
    Day
  </Button>
  <Button variant="primary" style={{ borderRadius: '0', borderRight: 'none' }}>
    Week
  </Button>
  <Button variant="outline" style={{ borderRadius: '0' }}>
    Month
  </Button>
</div>

CRUD Actions with Icons

<div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
  <Button variant="primary">
    <span style={{ marginRight: '8px' }}>💾</span>
    Save
  </Button>
  <Button variant="secondary">
    <span style={{ marginRight: '8px' }}>✏️</span>
    Edit
  </Button>
  <Button variant="outline">
    <span style={{ marginRight: '8px' }}>🗑️</span>
    Delete
  </Button>
</div>

Best Practices

When to Use Each Variant

• Primary: Main call-to-action, submit forms, primary navigation
• Secondary: Supporting actions, alternative paths, less prominent actions
• Outline: Cancel actions, tertiary actions, subtle interactions

Accessibility Guidelines

• Always use descriptive text that explains the action
• Include aria-label for icon-only buttons
• Use proper type attributes for form buttons
• Ensure sufficient color contrast (handled automatically)
• Test with keyboard navigation and screen readers

Performance Considerations

• Use loading states for async actions
• Disable buttons during processing to prevent double-submission
• Consider button grouping for related actions
• Use appropriate sizing for touch targets (minimum 44px)

Related

• Design Tokens - Learn about the design system foundation
• Getting Started - Basic setup and usage
• Storybook - Interactive examples and live demos