Button
Componente orientado a ejecutar acciones o cambios de estado.
La vista previa de Button se renderiza en el cliente.
Props del ejemplo
- aria-label
- "Ejemplo de Button"
- type
- "button"
<Button type={"button"}>Ejemplo de Button</Button>@tefi/design-system
Esta página importa la librería como namespace, detecta todos los exports con forma de componente React, los agrupa por categoría y genera un ejemplo base para cada uno.
Componente orientado a ejecutar acciones o cambios de estado.
<Button type={"button"}>Ejemplo de Button</Button>Componente orientado a ejecutar acciones o cambios de estado.
<FormActions>Ejemplo de FormActions</FormActions>Componente orientado a ejecutar acciones o cambios de estado.
<Switch checked={true} defaultChecked={true} />Componente para capturar, seleccionar o validar información del usuario.
<Checkbox checked={true} defaultChecked={true} />Componente para capturar, seleccionar o validar información del usuario.
<CheckboxGroup checked={true} defaultChecked={true} />Componente para capturar, seleccionar o validar información del usuario.
<Control>Ejemplo de Control</Control>Componente para capturar, seleccionar o validar información del usuario.
<Field placeholder={"Escribe en Field"} name={"Field-example"}>Ejemplo de Field</Field>Componente para capturar, seleccionar o validar información del usuario.
<FormField placeholder={"Escribe en FormField"} name={"FormField-example"}>Ejemplo de FormField</FormField>Componente para capturar, seleccionar o validar información del usuario.
<FormRow>Ejemplo de FormRow</FormRow>Componente para capturar, seleccionar o validar información del usuario.
<FormSection>Ejemplo de FormSection</FormSection>Componente para capturar, seleccionar o validar información del usuario.
<Input placeholder={"Escribe en Input"} name={"Input-example"} />Componente para capturar, seleccionar o validar información del usuario.
<Label>Ejemplo de Label</Label>Componente para capturar, seleccionar o validar información del usuario.
<NumberField placeholder={"Escribe en NumberField"} name={"NumberField-example"}>Ejemplo de NumberField</NumberField>Componente para capturar, seleccionar o validar información del usuario.
<PasswordField placeholder={"Escribe en PasswordField"} name={"PasswordField-example"}>Ejemplo de PasswordField</PasswordField>Componente para capturar, seleccionar o validar información del usuario.
<Radio name={"Radio-group"} value={"sample"} checked={true} />Componente para capturar, seleccionar o validar información del usuario.
<SearchField placeholder={"Escribe en SearchField"} name={"SearchField-example"}>Ejemplo de SearchField</SearchField>Componente para capturar, seleccionar o validar información del usuario.
<Select placeholder={"Selecciona una opción"} options={[{"label":"Opción A","value":"a"},{"label":"Opción B","value":"b"}]} />Componente para capturar, seleccionar o validar información del usuario.
<Textarea placeholder={"Describe un caso de uso para Textarea"} rows={3} />Componente para comunicar estados, resultados o retroalimentación visual.
<Chip variant={"primary"}>Ejemplo de Chip</Chip>Componente para comunicar estados, resultados o retroalimentación visual.
<ErrorMessage>Ejemplo de ErrorMessage</ErrorMessage>Componente para comunicar estados, resultados o retroalimentación visual.
<Spinner />Componente para orientar y permitir desplazamiento dentro de una interfaz.
<QuantityStepper>Ejemplo de QuantityStepper</QuantityStepper>Componente para estructurar, separar o distribuir contenido.
<Combobox placeholder={"Selecciona una opción"} options={[{"label":"Opción A","value":"a"},{"label":"Opción B","value":"b"}]}>Ejemplo de Combobox</Combobox>Componente para estructurar, separar o distribuir contenido.
<Container>Ejemplo de Container</Container>Componente para estructurar, separar o distribuir contenido.
<Grid>Ejemplo de Grid</Grid>Componente para estructurar, separar o distribuir contenido.
<Section>Ejemplo de Section</Section>Componente para estructurar, separar o distribuir contenido.
<Stack>Ejemplo de Stack</Stack>Componente para presentar contenido visual o textual.
<Heading>Título con Heading</Heading>Componente para presentar contenido visual o textual.
<HelperText>Texto de ejemplo renderizado con HelperText.</HelperText>Componente para presentar contenido visual o textual.
<Icon />Componente para presentar contenido visual o textual.
<Text>Texto de ejemplo renderizado con Text.</Text>Componente para presentar colecciones, entidades o datos estructurados.
<Card>Ejemplo de Card</Card>Componente para presentar colecciones, entidades o datos estructurados.
<OptionList>Ejemplo de OptionList</OptionList>Componente exportado por @tefi/design-system.
<FloatingSurface>Ejemplo de FloatingSurface</FloatingSurface>Componente exportado por @tefi/design-system.
<Inline>Ejemplo de Inline</Inline>Componente exportado por @tefi/design-system.
<OptionItem>Ejemplo de OptionItem</OptionItem>También se encontraron exports que no parecen componentes React renderizables.