Uso b谩sico
Para utilizar el componente, simplemente debes definir el atributo text
src/index.html
<Button text="Default" />
El c贸digo para Button es el siguiente:
src/index.html
const Button = ({
text,
variant = 'default',
disabled = false,
size = 'md',
rounded = 'md',
color = 'default',
}) => {
const variants = {
default: 'border-0 shadow-md backdrop-blur-sm',
bordered: 'border border-current shadow-md',
light: '',
complete: 'backdrop-blur-xl'
}
const sizes = {
sm: 'px-3 py-2 text-xs',
md: 'px-4 py-2.5 text-sm',
lg: 'px-5 py-3 text-base',
xl: 'px-6 py-3.5 text-lg'
}
const roundeds = {
none: 'rounded-none',
sm: 'rounded-sm',
md: 'rounded-md',
lg: 'rounded-lg',
full: 'rounded-full'
}
const colors = {
default: 'bg-neutral-100/20 dark:bg-zinc-700/30 ',
primary: 'bg-blue-500/20 ',
secondary: 'bg-indigo-500/20 ',
success: 'bg-green-500/30 ',
warning: 'bg-yellow-500/40 dark:bg-yellow-500/20 ',
danger: 'bg-red-500/20 '
}
const shadowColors = {
default:
'shadow-lg shadow-zinc-700/30 shadow-current dark:shadow-neutral-100/20',
primary: 'shadow-lg shadow-blue-500/30 shadow-current',
secondary: 'shadow-lg shadow-indigo-500/20 shadow-current',
success: 'shadow-lg shadow-green-500/30 shadow-current ',
warning: 'shadow-lg shadow-yellow-500/20 shadow-current',
danger: 'shadow-lg shadow-red-500/20 shadow-current'
}
const textColors = {
default: 'text-gray-800 dark:text-gray-300',
primary: 'text-blue-800 dark:text-blue-500',
secondary: 'text-indigo-800 dark:text-indigo-500',
success: 'text-green-800 dark:text-green-500',
warning: 'text-yellow-800 dark:text-yellow-500',
danger: 'text-red-800 dark:text-red-500'
}
const hoverColors = {
default: 'hover:bg-neutral-100/50 dark:hover:bg-zinc-700/10 ',
primary: 'hover:bg-blue-500/30 dark:hover:bg-blue-500/10',
secondary: 'hover:bg-indigo-500/30 dark:hover:bg-indigo-500/20',
success: 'hover:bg-green-500/60 dark:hover:bg-green-500/30',
warning: 'hover:bg-yellow-500/60 dark:hover:bg-yellow-500/30',
danger: 'hover:bg-red-500/30 dark:hover:bg-red-500/10'
}
export default Button
Variantes
Para cambiar el estilo del componente, se puede utilizar el atributo variant. Este atributo acepta cuatro valores: default, bordered, light y complete.
src/index.html
<Button text="Default" variant="default" />
<Button text="Bordered" variant="bordered" />
<Button text="Light" variant="light" />
<Button text="Complete" variant="complete" />
Tama帽os
Para cambiar el tama帽o del componente, se puede utilizar el atributo size. Este atributo acepta cuatro valores: sm, md, lg y xl.
src/index.html
<Button text="Small" size="sm" />
<Button text="Medium" size="md" />
<Button text="Large" size="lg" />
<Button text="Extra Large" size="xl" />
Color
Para cambiar el color del componente, se puede utilizar el atributo color. Este atributo acepta seis valores: default, primary, secondary, success, warning y danger.
src/index.html
<Button text="Default" color="default" />
<Button text="Primary" color="primary" />
<Button text="Secondary" color="secondary" />
<Button text="Success" color="success" />
<Button text="Warning" color="warning" />
<Button text="Danger" color="danger" />
<Button text="Default" color="default" variant="bordered"/>
<Button text="Primary" color="primary" variant="bordered"/>
<Button text="Secondary" color="secondary" variant="bordered"/>
<Button text="Success" color="success" variant="bordered"/>
<Button text="Warning" color="warning" variant="bordered"/>
<Button text="Danger" color="danger" variant="bordered"/>
<Button text="Default" color="default" variant="light"/>
<Button text="Primary" color="primary" variant="light"/>
<Button text="Secondary" color="secondary" variant="light"/>
<Button text="Success" color="success" variant="light"/>
<Button text="Warning" color="warning" variant="light"/>
<Button text="Danger" color="danger" variant="light"/>
<Button text="Default" color="default" variant="complete"/>
<Button text="Primary" color="primary" variant="complete"/>
<Button text="Secondary" color="secondary" variant="complete"/>
<Button text="Success" color="success" variant="complete"/>
<Button text="Warning" color="warning" variant="complete"/>
<Button text="Danger" color="danger" variant="complete"/>
Rounded
Para cambiar el redondeado del componente, se puede utilizar el atributo rounded. Este atributo acepta cuatro valores: none, sm, md, lg y full.
src/index.html
<Button text="Rounded none" color="primary" rounded="none" />
<Button text="Rounded sm" color="primary" rounded="sm" />
<Button text="Rounded md" color="primary" rounded="md" />
<Button text="Rounded lg" color="primary" rounded="lg" />
<Button text="Rounded lg" color="primary" rounded="full" />
Deshabilitado
Para deshabilitar el componente, se puede utilizar el atributo disabled={true}.
src/index.html
<Button text="Disabled" color="primary" disabled={true} />