Button

The Button component is a fundamental UI element used for user interactions.

Usage

import { Button, ButtonVariant, ButtonSize } from 'blend-v1'

function MyComponent() {
    return (
        <Button
            variant={ButtonVariant.Primary}
            size={ButtonSize.Medium}
            text="Click me"
            onClick={() => console.log('clicked')}
        />
    )
}

API Reference

Features

• Multiple button types (primary, secondary, danger, success)
• Three sizes (small, medium, large)
• Loading and disabled states
• Icon support (leading and trailing)
• Full width option
• Flexible content alignment
• Button group positioning support

Usage Examples

Basic Button

Simple button with text

<Button text="Click me" buttonType={ButtonType.PRIMARY} />

Button with Icons

Button with leading and trailing icons

<Button
    text="Save"
    leadingIcon={<SaveIcon />}
    buttonType={ButtonType.SUCCESS}
/>

Loading Button

Button in loading state

<Button text="Processing..." loading={true} buttonType={ButtonType.PRIMARY} />

Full Width Button

Button that takes full width of container

<Button text="Full Width" fullWidth={true} buttonType={ButtonType.SECONDARY} />

Component Tokens

You can style the button component using the following tokens:

export type ButtonState = 'default' | 'hover' | 'active' | 'disabled'

export type ButtonTokensType = {
    gap: CSSObject['gap']
    backgroundColor: {
        [key in ButtonType]: {
            [key in ButtonSubType]: {
                [key in ButtonState]: CSSObject['background']
            }
        }
    }
    color: {
        [key in ButtonType]: {
            [key in ButtonSubType]: {
                [key in ButtonState]: CSSObject['color']
            }
        }
    }
    borderRadius: {
        [key in ButtonType]: {
            [key in ButtonSubType]: {
                [key in ButtonState]: CSSObject['borderRadius']
            }
        }
    }
    padding: {
        [key in ButtonSize]: {
            [key in ButtonSubType]: CSSObject['padding']
        }
    }
    border: {
        [key in ButtonType]: {
            [key in ButtonSubType]: {
                [key in ButtonState]: CSSObject['border']
            }
        }
    }
    shadow: {
        [key in ButtonType]: {
            [key in ButtonSubType]: {
                [key in ButtonState]: CSSObject['boxShadow']
            }
        }
    }
    outline: {
        [key in ButtonType]: {
            [key in ButtonSubType]: {
                [key in ButtonState]: CSSObject['outline']
            }
        }
    }
}