Buttons

Buttons are interactive elements that trigger actions in your application. Rise AI provides multiple button variants to suit different use cases.

Variants

Primary Button

The primary button is used for main actions:

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

Styling:

• Background: Black (#000000)
• Text: White (#FFFFFF)
• Hover: 90% opacity
• Border radius: 6px

Secondary Button

For secondary or less prominent actions:

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

Styling:

• Background: Light gray (#FAFAFA)
• Text: Black (#000000)
• Hover: Slightly darker background
• Border radius: 6px

Outline Button

For tertiary actions or cancel buttons:

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

Styling:

• Background: Transparent
• Border: 1px solid border color
• Text: Foreground color
• Hover: Light background fill

Sizes

Buttons come in three sizes:

<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>

Size	Padding	Font Size
Small	0.25rem 0.75rem	0.75rem (12px)
Medium	0.5rem 1rem	0.875rem (14px)
Large	0.75rem 1.5rem	1rem (16px)

States

Disabled

<Button disabled>Disabled Button</Button>

Disabled buttons have reduced opacity and no hover effects.

Loading

<Button loading>Loading...</Button>

Shows a loading spinner while the action is processing.

Icons

Buttons can include icons:

import { Save } from 'lucide-react';

<Button>
  <Save className="mr-2" />
  Save Changes
</Button>

Full Width

Make buttons span the full width of their container:

<Button fullWidth>Full Width Button</Button>

Examples

Form Submit Button

<form onSubmit={handleSubmit}>
  <Button type="submit" variant="primary" fullWidth>
    Submit Form
  </Button>
</form>

Action Group

<div className="button-group">
  <Button variant="outline">Cancel</Button>
  <Button variant="primary">Confirm</Button>
</div>

Icon Button

<Button variant="outline" size="small">
  <Settings className="h-4 w-4" />
</Button>

Accessibility

• Use semantic <button> elements
• Include descriptive text or aria-label
• Ensure keyboard navigation works
• Maintain proper color contrast
• Disable buttons when actions are unavailable

Dark Mode

Buttons automatically adapt to dark mode:

Primary (Dark Mode):

• Background: White (#FFFFFF)
• Text: Black (#000000)

Secondary (Dark Mode):

• Background: Dark gray (#262626)
• Text: Light gray (#F2F2F2)

CSS Variables

Customize button colors using CSS variables:

:root {
  --primary: hsl(0, 0%, 0%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(0, 0%, 98%);
  --secondary-foreground: hsl(0, 0%, 0%);
  --radius: 0.5rem;
}

Best Practices

1. Use primary buttons for the main action on a page
2. Limit to one primary button per section
3. Use outline buttons for cancel/dismiss actions
4. Include loading states for async operations
5. Provide clear, action-oriented button text