button: gradient background, 2xl size
This commit is contained in:
parent
055cf7dd31
commit
48435c91ad
|
@ -5,8 +5,8 @@ export function Button(props: {
|
|||
className?: string
|
||||
onClick?: () => void
|
||||
children?: ReactNode
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
||||
color?: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray'
|
||||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
|
||||
color?: 'green' | 'red' | 'blue' | 'indigo' | 'yellow' | 'gray' | 'gradient'
|
||||
type?: 'button' | 'reset' | 'submit'
|
||||
disabled?: boolean
|
||||
}) {
|
||||
|
@ -26,6 +26,7 @@ export function Button(props: {
|
|||
md: 'px-4 py-2 text-sm',
|
||||
lg: 'px-4 py-2 text-base',
|
||||
xl: 'px-6 py-3 text-base',
|
||||
'2xl': 'px-6 py-3 text-xl',
|
||||
}[size]
|
||||
|
||||
return (
|
||||
|
@ -40,6 +41,8 @@ export function Button(props: {
|
|||
color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',
|
||||
color === 'indigo' && 'bg-indigo-500 text-white hover:bg-indigo-600',
|
||||
color === 'gray' && 'bg-gray-100 text-gray-600 hover:bg-gray-200',
|
||||
color === 'gradient' &&
|
||||
'bg-gradient-to-r from-indigo-500 to-blue-500 text-white hover:from-indigo-700 hover:to-blue-700',
|
||||
className
|
||||
)}
|
||||
disabled={disabled}
|
||||
|
|
Loading…
Reference in New Issue
Block a user