---
title: "Props"
date: "2025-07-25T07:12:35+00:00"
summary: "Simplify content creation with configurable props. Learn how to use text, media, and lists to make user-friendly components."
image:
type: "page"
url: "/acquia-source/props"
id: "d5702cb8-21bc-4c4f-8c9f-cdc810fe89a6"
---

Props are configurable fields that make components user-friendly and simplify content creation. 

Props are used to:

*   Create fields that can be filled without editing the code. For example, Title, Description, and Button Text.
*   Select colors, sizes, alignments, or behaviors from pre-defined options.
*   Present options as familiar UI controls such as dropdowns, toggles, and color pickers.
*   Set appropriate defaults so that components work well out-of-the-box.

Example: A Featured Content component might have configurable props for headline text, subtitle, image, background color, and button label without showing the underlying markup.

The prop name is automatically converted to camelCase. For example, if the prop name is **Heading Text**, it can be accessed in the component as **headingText**.

![acquia-source_props](https://acquia.widen.net/content/27a3f8d7-867b-4653-be26-2e72da56564f/web/30805_acquia-source_props.png?w=720&itok=ZH3AfnYg)

The following table lists the available prop types:

Name

Example Usage

Text

    const Text = ({ text }) => {
      return (
        {text}
      );
    };

Formatted Text

    import FormattedText from "@/lib/FormattedText";
    const FormattedText = ({ formattedText }) => {
      return (
        <FormattedText>{formattedText}</FormattedText>
      );
    };

Link

    const Link = ({ link }) => {
      return (
        <a href={link}>Link text</a>
      );
    };

Image

    import Image from "@/lib/Image";
    const Image = ({ image }) => {
      return (
        <Image {...image} />
      );
    };

Boolean

    const Boolean = ({ boolean }) => {
      return (
        {boolean && <h1>Boolean: checked</h1>}
        {!boolean && <h1>Boolean: unchecked</h1>}
      );
    };

Integer

    const Integer = ({ integer }) => {
      return (
        <h1 style=`padding-top: ${integer}px`>Heading with spacing</h1>
      );
    };

List: text

    import FormattedText from "@/lib/FormattedText";
    import { cva } from 'class-variance-authority';
    
    const variants = cva('', {
      variants: {
        layout: {
          left: 'text-left',
          center: 'text-center',
        },
      },
      defaultVariants: {
        layout: 'left',
      },
    });
    const ListText = ({ listText }) => {
      return (
        <h1 className={variants({ layout: listText })>Heading text</h1>
      );
    };

List: integer

    const ListInteger = ({ listInteger }) => {
      return (
        <h1 style=`padding-top: ${listInteger}px`>Heading with spacing</h1>
      );
    };