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

Related

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