Button

Buttons allow users to take actions, and make choices, with a single tap. Buttons communicate actions that users can take. They are typically placed throughout your website UI, and they should be easily findable and identifiable while clearly indicating the action they allow a user to complete.

Usage

Code Editor
Copy
import { Button } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { ButtonThemeProps, ButtonSizeProps } from '@erudilabs/alma'
ButtonThemeProps = 'default' | 'primary' | 'danger' | 'success' | 'warning'
ButtonSizeProps = 'small' | 'medium' | 'large'

Component

Here preview and detail explain of Button component


Default

Code Editor
Copy
<Button>Default</Button>

Theme

These themes allow you to apply different visual styles to the Button, Whether it's indicating different statuses, categories, or providing visual cues, the ability to customize Button themes adds flexibility and enhances the visual appeal of your UI components.




Primary
Code Editor
Copy
<Button theme="primary">Primary</Button>

Danger
Code Editor
Copy
<Button theme="danger">Danger</Button>

Warning
Code Editor
Copy
<Button theme="warning">Warning</Button>

Success
Code Editor
Copy
<Button theme="success">Success</Button>

Outline



Default outline
Code Editor
Copy
<Button outline>Default Outline</Button>

Primary outline
Code Editor
Copy
<Button theme="primary" outline>Primary Outline</Button>

Danger outline
Code Editor
Copy
<Button theme="danger" outline>Danger Outline</Button>

Warning outline
Code Editor
Copy
<Button theme="warning" outline>Warning Outline</Button>

Success outline
Code Editor
Copy
<Button theme="success" outline>Success Outline</Button>

Size

Prop determines the dimensions of the button, affecting its width, height, and padding. You can define different sizes




Small
Code Editor
Copy
<Button theme="primary" size="small">Small</Button>

Medium
Code Editor
Copy
<Button theme="primary" size="medium">Medium</Button>

Large
Code Editor
Copy
<Button theme="primary" size="large">Large</Button>

Disabled

Code Editor
Copy
<Button theme="danger" disabled>
  Disabled
</Button>

Block

Code Editor
Copy
<Button theme="success" block>Block</Button>

Loading

Code Editor
Copy
<Button theme="primary" loading>Continue</Button>

Props Reference

Prop
Type

id?

string

testId?

string

children?

ReactNode

className?

string

theme?

ButtonThemeProps

size?

ButtonSizeProps

disabled?

boolean

block?

boolean

loading?

boolean

outline?

boolean

onChange?

(e) => void

onBlur?

(e: FocusEvent) => void