Botones

Un botón significa una operación. Al hacer clic en un botón se activará la lógica de negocio correspondiente.

Primary Button
Secondary Button
Danger Button
Warning Button
Success Button
Outline Button
Transparent Button
Text Button

Utilización

import {
    PrimaryButton,
    SecondaryButton,
    DangerButton,
    WarningButton,
    SuccessButton,
    OutlineButton,
    TransparentButton,
    TextButton
} from "firefly-components/buttons";


<PrimaryButton content="Primary Button" />
<SecondaryButton content="Secondary Button" />
<DangerButton content="Danger Button" />
<WarningButton content="Warning Button" />
<SuccessButton content="Success Button" />
<OutlineButton content="Outline Button" />
<TransparentButton content="Transparent Button" />
<TextButton content="Text Button" />

Props

contentEs el contenido del botón. Puede recibir strings u otros componentes de React. También puedes poner contenido dentro del botón con la prop children.
leftIconPermite colocar un icono a la izquierda del contenido especificado a través de content.
rightIconPermite colocar un icono a la derecha del contenido especificado a través de content.
handleClickRecibe una función que sera ejecutada cuando se haga clic en el botón.
disabledPermite habilitar o deshabilitar el botón. Recibe un valor booleano. Si no se especifica, su valor por defecto es false.
widthPermite cambiar la propiedad width del botón. Esta propiedad se comporta igual que la propiedad width de CSS. Si no se especifica, su valor por defecto es fit-content.
marginPermite cambiar la propiedad margin del botón. Esta propiedad se comporta igual que la propiedad margin de CSS. Si no se especifica, su valor por defecto es 0.
typePermite cambiar la propiedad type del botón. Si no se especifica, su valor por defecto es button.
activePermite cambiar el estado active del botón. Recibe un valor booleano. Si no se especifica, su valor por defecto es false. Esta propiedad solo tiene efecto en los siguientes botones:
  • Text Button
  • Transparent Button
  • Secondary Button
  • Outline Button
paddingPermite cambiar la propiedad padding del botón. Esta propiedad se comporta igual que la propiedad padding de CSS. Si no se especifica, su valor por defecto es 0 1rem.

Ejemplos

Agregando iconos

Icono a la derecha:
<PrimaryButton
    content="Primary Button"
    rightIcon={<RightArrow />}
/>
Icono a la izquierda:
<SuccessButton
    content="Success Button"
    leftIcon={<LeftArrow />}
/>

Agregando contenido al botón a través de children

<WarningButton>
    Warning Button
</WarningButton>

Cuando se usa children para agregar contenido al botón, la propiedad content se deshabilita, por lo que cualquier contenido pasado por esta ultima prop no se mostrará.

En esta pagina: