ButtonCustom

Overview

The ButtonCustom component is a flexible button wrapper that extends standard HTML button functionality with custom styling and consistent design across the Centinela application. It supports multiple button types, custom classes, and disabled states.

Import

import ButtonCustom from '../../../components/ButtonCustom'

Props

type

string

default:"button"

The HTML button type attribute. Common values include:

button - Standard button
submit - Form submission button
reset - Form reset button

children

ReactNode

The content to display inside the button. Can include text, icons, or other React components.

onclick

function

Event handler function called when the button is clicked.

onclick={(e) => console.log('Button clicked')}

props

object

Additional configuration object with the following properties:

props.text

string

Alternative way to provide button text. Takes priority over children if both are provided.

props.class

string

Custom CSS classes to apply to the button for additional styling.

props.disabled

boolean

default:"false"

Whether the button should be disabled (non-interactive).

Default Styling

The component applies the following default classes:

py-2.5 - Vertical padding
px-4 - Horizontal padding
font-semibold - Bold font weight
AeromaticsRegular - Custom font family
rounded-xl - Extra large border radius
shadow-md - Medium shadow effect

Usage Examples

Basic Button

<ButtonCustom 
  type="button" 
  onclick={() => console.log('Clicked!')}
  props={{ text: 'Click Me' }}
/>

Submit Button with Custom Styling

<ButtonCustom 
  type="submit" 
  onclick={handleSubmit}
  props={{
    text: 'Guardar Cambios',
    class: 'bg-blue-600 text-white hover:bg-blue-700'
  }}
/>

Disabled Button

<ButtonCustom 
  type="button" 
  onclick={handleAction}
  props={{
    text: 'Procesando...',
    disabled: true,
    class: 'bg-gray-400 text-gray-200 cursor-not-allowed'
  }}
/>

Button with Icon Children

<ButtonCustom 
  type="button" 
  onclick={handleRefresh}
>
  <RefreshIcon className="mr-2" />
  Actualizar Datos
</ButtonCustom>

Primary Action Button

<ButtonCustom 
  type="submit" 
  onclick={handleSave}
  props={{
    text: 'Crear Gráfico',
    class: 'bg-primary text-white hover:bg-primary-dark transition-colors'
  }}
/>

Danger Button

<ButtonCustom 
  type="button" 
  onclick={handleDelete}
  props={{
    text: 'Eliminar',
    class: 'bg-red-600 text-white hover:bg-red-700'
  }}
/>

Common Use Cases

Form Submission
Navigation
Conditional State

import { useForm } from 'react-hook-form'
import ButtonCustom from '../../../components/ButtonCustom'

function MyForm() {
  const { handleSubmit } = useForm()
  
  const onSubmit = (data) => {
    console.log('Form data:', data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Form fields */}
      
      <ButtonCustom 
        type="submit"
        props={{
          text: 'Enviar Formulario',
          class: 'bg-green-600 text-white hover:bg-green-700'
        }}
      />
    </form>
  )
}

import { useNavigate } from 'react-router-dom'
import ButtonCustom from '../../../components/ButtonCustom'

function DashboardNav() {
  const navigate = useNavigate()

  return (
    <ButtonCustom 
      type="button"
      onclick={() => navigate('/config/graphic')}
      props={{
        text: 'Crear Gráfico',
        class: 'bg-primary text-white'
      }}
    />
  )
}

import { useState } from 'react'
import ButtonCustom from '../../../components/ButtonCustom'

function DataLoader() {
  const [loading, setLoading] = useState(false)

  const handleLoad = async () => {
    setLoading(true)
    await fetchData()
    setLoading(false)
  }

  return (
    <ButtonCustom 
      type="button"
      onclick={handleLoad}
      props={{
        text: loading ? 'Cargando...' : 'Cargar Datos',
        disabled: loading,
        class: loading 
          ? 'bg-gray-400 cursor-not-allowed' 
          : 'bg-blue-600 text-white hover:bg-blue-700'
      }}
    />
  )
}

Component Source

Location: ~/workspace/source/src/components/ButtonCustom/index.jsx

The ButtonCustom component provides a consistent button interface across the Centinela application. For more complex button states or variants, consider wrapping this component or extending its props object with additional styling options.

Accessibility

Always provide meaningful text through either children or props.text
Use appropriate type attribute for form contexts
Ensure disabled states are visually distinct
Consider adding ARIA labels for icon-only buttons

Best Practices

Consistent Styling: Define reusable button style classes for common actions (primary, secondary, danger)
Loading States: Disable buttons during async operations and update text to reflect state
Type Specification: Always specify the button type to prevent unintended form submissions
Click Handlers: Use the onclick prop instead of wrapping in additional elements

Chart Types

UI Components

Overview

Import

Props

Default Styling

Usage Examples

Basic Button

Submit Button with Custom Styling

Disabled Button

Button with Icon Children

Primary Action Button

Danger Button

Common Use Cases

Component Source

Accessibility

Best Practices

Build docs developers (and LLMs) love

Chart Types

UI Components

Documentation Index

​Overview

​Import

​Props

​Default Styling

​Usage Examples

​Basic Button

​Submit Button with Custom Styling

​Disabled Button

​Button with Icon Children

​Primary Action Button

​Danger Button

​Common Use Cases

​Component Source

​Accessibility

​Best Practices

Build docs developers (and LLMs) love

Overview

Import

Props

Default Styling

Usage Examples

Basic Button

Submit Button with Custom Styling

Disabled Button

Button with Icon Children

Primary Action Button

Danger Button

Common Use Cases

Component Source

Accessibility

Best Practices