> For the complete documentation index, see [llms.txt](https://docs.vueless.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.vueless.com/component-customization/props-defaults.md). # Props defaults Component props such as `size`, `color`, `variant`, etc., have default values that can be overridden in the project's `vueless.config.{js,ts}`.

export default {
  component: {
    UButton: {
      defaults: {
        size: "lg",
        color: "red",
        variant: "secondary"
      }
    }
  }
};

## Nested component defaults The `config` prop can also be used to redefine default prop values. In practice, this is useful for changing default values of nested components.

<UPagination 
  label="Submit" 
  :config="{ 
    activeButton: {
      defaults: { 
        size: 'xl', 
        color: 'blue'
      } 
    }
  }"
/>

In the example above, we redefine the default values for the nested `UButton` component within the parent `UPagination` component. ## Conditional default values If you need to set default values for nested components based on the parent component’s prop value, you can use an object with mapped values.

export default {
  component: {
    UDropdownButton: {
      dropdownList: {
        defaults: {
          size: {
            "2xs": "sm",
            xs: "sm",
            sm: "sm",
            md: "md",
            lg: "lg",
            xl: "lg",
          }
        }
      }
    }
  }
};

This will conditionally set the size for the `UDropdownList` component based on the size value of the `UDropdownButton` component. For example, if the UDropdownButton’s size prop is set to `"2xs"`, the UDropdownList component will automatically receive a size value of `"sm"`.