Mockline v0.17.3

Button

A versatile button component that supports multiple variants, sizes, and states. Can be used as a button or link with rich customization options.

Overview

The Button component is a fundamental UI element that can be used to trigger actions or navigate to different pages. It supports various styles, sizes, and states to match your application's design needs.

Features

  • Multiple variants (solid, soft, subtle, ghost, link)
  • Different sizes (xs to xl)
  • Support for icons (leading and trailing)
  • Loading and disabled states
  • Can act as a button or link
  • Full width option
  • Customizable rounded corners

Usage

Basic Button

The simplest way to use the button is with text content:

Variants

The button comes in five different variants to suit different contexts:

Colors

Buttons support three color schemes:

Sizes

Choose from five different sizes:

Icons

Add icons to your buttons using the leadingIcon or trailingIcon props:

States

Buttons support various states including loading and disabled:

Links

Use the to prop to make the button act as a link:

Home Page

Props

label
string

Text content of the button. Can be used instead of the default slot.

color
'primary' | 'neutral' | 'danger'

The color scheme of the button.

variant
'solid' | 'soft' | 'subtle' | 'ghost' | 'link'

The visual style variant of the button.

size
'xs' | 'sm' | 'md' | 'lg' | 'xl'

The size of the button.

rounded
'none' | 'base' | 'sm' | 'md' | 'lg' | 'xl' | 'full'

Controls the border radius of the button.

square
boolean

When true, applies equal padding on all sides. Automatically set to true for icon-only buttons.

block
boolean

Makes the button take the full width of its container.

loading
boolean

Shows a loading spinner and disables the button.

disabled
boolean

Disables the button, preventing user interaction.

leadingIcon
string

Icon name to display before the label.

trailingIcon
string

Icon name to display after the label.

to
string

When provided, the button becomes a link to the specified URL or route.

class
string

Additional CSS classes to apply to the button.

iconClass
string

Additional CSS classes to apply to the icons.

labelClass
string

Additional CSS classes to apply to the label.

Slots

default
any

The default slot for button content. Alternative to using the label prop.

leading
any

Slot for custom leading content, typically used for custom icons.

trailing
any

Slot for custom trailing content, typically used for custom icons.

Best Practices

  1. Use appropriate colors to convey meaning:
    • primary for main actions
    • neutral for secondary actions
    • danger for destructive actions
  2. Choose the right variant:
    • solid for primary actions
    • soft or subtle for secondary actions
    • ghost or link for tertiary actions
  3. Maintain consistent sizing:
    • Use md size by default
    • Use larger sizes (lg, xl) for main call-to-action buttons
    • Use smaller sizes (xs, sm) for compact interfaces
  4. Add loading states for async actions to provide feedback
  5. Use icons thoughtfully to enhance visual communication
Switch
Learn how to use the Switch component in your application.