Button Component

The Button component provides acts as the foundation for many of the components in this library. It supports multiple variants, sizes, and can function as either a button or link.

Key Features

• Flexible Variants: Seventeen distinct styles for different contexts

• Responsive Sizing: Five size options to fit any layout

• Icon Support: Seamless integration with icons

• Link Capability: Functions as both button and link

Variants

Variant Use Cases

• Default: Primary actions and main calls-to-action
• Secondary: Alternative or complementary actions
• Input: Styled to look like an input field, used for select, dropdown, datepicker, etc.
• Destructive: Actions that require caution or delete operations
• Transparent: Subtle interactions within content
• Link: Text-based navigation while maintaining button behavior
• Icon: Compact, icon-only actions

Size Options

Buttons come in five sizes to fit different contexts:

Input variant styling

To style the input variant, pass the inputVariant prop either true to have the default input styling or an object to have the input variant styling. It matches the input variants from the input component.

Disabled State

The disabled state is applied to the button when the disabled prop is set to true.

Code Example

1
---
2
import Button from '@/components/NST-components/UI/button/Button.astro';
3
import close from '@/assets/icons/close.svg?raw';
4
---
5

6
<!-- Standard Button -->
7
<Button variant="default" size="default"> Click Me </Button>
8

9
<!-- Link Button -->
10
<Button variant="link" href="/about"> About Us </Button>
11

12
<!-- Icon Button -->
13
<Button variant="icon" icon={close} size="lg" />
14

15
<!-- Disabled State -->
16
<Button variant="default" disabled> Unavailable </Button>
17

18
<Button inputVariant disabled> Input Style </Button>

Button Component Props API

Advanced Features

Icon Integration

Add icons to enhance button clarity:

1
<Button variant="default" iconPosition="right" iconProps={{ class: 'ml-1' }} icon={arrowRight}>
2
    Next
3
</Button>

/>

Link Functionality

Buttons with href attribute will use the <a> anchor element while maintaining button styling:

Best Practices

• Button Text

  • Use action verbs
  • Keep text concise
  • Be descriptive
  • Maintain consistency

• Visual Hierarchy

  • Use primary variant for main actions
  • Limit destructive buttons
  • Group related buttons
  • Maintain adequate spacing

• Responsive Design

  • Consider mobile touch targets
  • Adapt size to viewport
  • Ensure readable text
  • Test across devices

Common Applications