@porsche-design-system/components-react 4.0.0-beta.4 → 4.0.0-rc.1

package/CHANGELOG.md

@@ -14,6 +14,70 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ## [Unreleased]
 
+## [4.0.0-rc.1] - 2026-04-07
+
+### Added
+
+- `Banner`:
+  - Prop `position` with values: `BreakpointCustomizable<'top' | 'bottom'>` (default: `{ base: 'bottom', s: 'top' }`)
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-top`: Defines the distance from the top of the viewport. Only takes effect when the
+    `position` property is set to `top` (at the respective breakpoint).
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-bottom`: Defines the distance from the bottom of the viewport. Only takes effect when the
+    `position` property is set to `bottom` (at the respective breakpoint).
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-max-w`: Defines the maximum width of the banner.
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-inset-x`: Defines the horizontal offset of the banner from the edges of the viewport.
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+- `Tailwind CSS`: `--spacing-static-2xs`
+  ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+- `SCSS`: `$spacing-static-2xs` ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+- `Tokens`, `Emotion`, `Vanilla Extract`: `spacingStatic2xs`
+  ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+
+### Changed
+
+- `Banner`, `Inline Notification`: Improve visual appearance
+  ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+- `Banner`: `max-width` is now `100ch` by default to increase readability. Use CSS Variable `--p-banner-max-w` and
+  `--p-banner-inset-x` to set custom `max-width` and horizontal offset.
+  ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+- `SCSS`:
+  - All `prose-heading-*` and `prose-text-*` mixins set `color` to the primary token by default, overridable via the CSS
+    cascade ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+- `Emotion`, `Vanilla Extract`:
+  - All `proseHeading*` and `proseText*` style objects set `color` to the primary token by default, overridable in your
+    own styles ([#4262](https://github.com/porsche-design-system/porsche-design-system/pull/4262))
+
+### Fixed
+
+- `Accordion`: summary overlapping details when custom padding is applied
+  ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
+- `Scroller`: mask not rendering on ios when `scrollbar` set to `true`
+  ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
+- `Modal`, `Sheet`: visual bug in the corner when scrolled
+  ([#4272](https://github.com/porsche-design-system/porsche-design-system/pull/4272))
+- `Model Signature`: `--p-model-signature-color` not working with gradients
+  ([#4272](https://github.com/porsche-design-system/porsche-design-system/pull/4272))
+- `Tabs Bar`: flickering of active tab in certain cases
+  ([#4263](https://github.com/porsche-design-system/porsche-design-system/pull/4263))
+- Global Styles: missing individual export for `color-scheme.css`
+  ([#4260](https://github.com/porsche-design-system/porsche-design-system/pull/4260))
+- `Table`: double focus outline of sort buttons
+  ([#4270](https://github.com/porsche-design-system/porsche-design-system/pull/4270))
+
+### Deprecated
+
+- `Banner`:
+  - CSS Variable `--p-banner-position-top` (use `--p-banner-top` instead)
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+  - CSS Variable `--p-banner-position-bottom` (use `--p-banner-bottom` instead)
+    ([#4264](https://github.com/porsche-design-system/porsche-design-system/pull/4264))
+
+## [4.0.0-rc.0] - 2026-03-27
+
 ## [4.0.0-beta.4] - 2026-03-25
 
 ### Added
@@ -59,6 +123,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0),
 
 ### Added
 
+- Storefront: documentation for integrating Porsche Design System with AI coding assistants like GitHub Copilot and
+  Cursor to generate accessible code that follows WCAG 2.2 AA standards.
+  ([#4147](https://github.com/porsche-design-system/porsche-design-system/pull/4147))
 - `Tokens`: `typescale3Xl`, `typescale4Xl`, `typescale5Xl`
   ([#4246](https://github.com/porsche-design-system/porsche-design-system/pull/4246))
 - `Tailwind CSS`: `--text-3xl`, `--text-4xl`, `--text-5xl`, `.prose-heading-3xl`, `.prose-heading-4xl`,
@@ -3518,9 +3585,10 @@ major version.
 
 ##### Content Wrapper:
 
-- Component is deprecated and will be removed with the next major release. Please use **[Porsche Grid](/styles/grid/)**
-  instead, which is based on [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) covering the specific
-  layout needs for a harmonic appearance across all digital Porsche touch-points.
+- Component is deprecated and will be removed with the next major release. Please use
+  **[Porsche Grid](/tailwindcss/grid/examples/)** instead, which is based on
+  [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) covering the specific layout needs for a harmonic
+  appearance across all digital Porsche touch-points.
 
 ##### Flex:
 
@@ -3532,7 +3600,7 @@ major version.
 
 - Component is deprecated and will be removed with the next major release. In general, please use native
   [CSS Grid](https://css-tricks.com/snippets/css/complete-guide-grid) in combination with
-  **[Porsche Grid](/styles/grid/)** instead for better performance and more standardized layout technique.
+  **[Porsche Grid](/tailwindcss/grid/examples/)** instead for better performance and more standardized layout technique.
 
 ##### Headline:
 

package/cjs/lib/components/banner.wrapper.cjs

@@ -6,14 +6,14 @@ var react = require('react');
 var hooks = require('../../hooks.cjs');
 var utils = require('../../utils.cjs');
 
-const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, state = 'info', className, ...rest }, ref) => {
+const PBanner = /*#__PURE__*/ react.forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, position = { base: 'bottom', s: 'top' }, state = 'info', className, ...rest }, ref) => {
     const elementRef = react.useRef(undefined);
     hooks.useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = hooks.usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, headingTag, open, state];
+    const propsToSync = [description, dismissButton, heading, headingTag, open, position, state];
     hooks.useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'position', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/accordion.wrapper.d.ts

@@ -3,10 +3,12 @@ import type { AccordionAlignMarker, AccordionBackground, AccordionHeadingTag, Ac
 export type PAccordionProps = BaseProps & {
     /**
      * Aligns the marker within the summary section.
+     * @default 'end'
      */
     alignMarker?: AccordionAlignMarker;
     /**
      * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * @default 'none'
      */
     background?: AccordionBackground;
     /**
@@ -19,6 +21,7 @@ export type PAccordionProps = BaseProps & {
     heading?: string;
     /**
      * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
+     * @default 'h2'
      */
     headingTag?: AccordionHeadingTag;
     /**
@@ -31,6 +34,7 @@ export type PAccordionProps = BaseProps & {
     open?: boolean;
     /**
      * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
+     * @default 'small'
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**
@@ -41,10 +45,12 @@ export type PAccordionProps = BaseProps & {
 export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Aligns the marker within the summary section.
+     * @default 'end'
      */
     alignMarker?: AccordionAlignMarker;
     /**
      * Defines the background color. Use `frosted` only on images, videos or gradients.
+     * @default 'none'
      */
     background?: AccordionBackground;
     /**
@@ -57,6 +63,7 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
     heading?: string;
     /**
      * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Sets the heading tag for proper semantic structure within the page.
+     * @default 'h2'
      */
     headingTag?: AccordionHeadingTag;
     /**
@@ -69,6 +76,7 @@ export declare const PAccordion: import("react").ForwardRefExoticComponent<Omit<
     open?: boolean;
     /**
      * @deprecated Will be removed in the next major release. Use the `summary` slot instead. Controls the heading size in the summary section (only applies when using the `heading` prop or `heading` slot).
+     * @default 'small'
      */
     size?: BreakpointCustomizable<AccordionSize>;
     /**

package/esm/lib/components/banner.wrapper.d.ts

@@ -1,62 +1,84 @@
 import type { BaseProps } from '../../BaseProps';
-import type { BannerHeadingTag, BannerState } from '../types';
+import type { BannerHeadingTag, BreakpointCustomizable, BannerPosition, BannerState } from '../types';
 export type PBannerProps = BaseProps & {
     /**
-     * Description of the banner.
+     * Sets the description text of the banner.
+     * @default ''
      */
     description?: string;
     /**
-     * If false, the banner will not have a dismiss button.
+     * Shows a dismiss button allowing the banner to be closed.
+     * @default true
      */
     dismissButton?: boolean;
     /**
-     * Heading of the banner.
+     * Sets the heading text of the banner.
+     * @default ''
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * Sets the heading tag for proper semantic structure within the page.
+     * @default 'h5'
      */
     headingTag?: BannerHeadingTag;
     /**
-     * Emitted when the close button is clicked.
+     * Emitted when the banner is requested to be dismissed.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * If true, the banner is open.
+     * Controls whether the banner is open or closed.
+     * @default false
      */
     open: boolean;
     /**
-     * State of the banner.
+     * Sets the position of the banner.
+     * @default { base: 'bottom', s: 'top' }
+     */
+    position?: BreakpointCustomizable<BannerPosition>;
+    /**
+     * Defines the visual state of the banner.
+     * @default 'info'
      */
     state?: BannerState;
 };
 export declare const PBanner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
-     * Description of the banner.
+     * Sets the description text of the banner.
+     * @default ''
      */
     description?: string;
     /**
-     * If false, the banner will not have a dismiss button.
+     * Shows a dismiss button allowing the banner to be closed.
+     * @default true
      */
     dismissButton?: boolean;
     /**
-     * Heading of the banner.
+     * Sets the heading text of the banner.
+     * @default ''
      */
     heading?: string;
     /**
-     * Sets a heading tag, so it fits correctly within the outline of the page.
+     * Sets the heading tag for proper semantic structure within the page.
+     * @default 'h5'
      */
     headingTag?: BannerHeadingTag;
     /**
-     * Emitted when the close button is clicked.
+     * Emitted when the banner is requested to be dismissed.
      */
     onDismiss?: (event: CustomEvent<void>) => void;
     /**
-     * If true, the banner is open.
+     * Controls whether the banner is open or closed.
+     * @default false
      */
     open: boolean;
     /**
-     * State of the banner.
+     * Sets the position of the banner.
+     * @default { base: 'bottom', s: 'top' }
+     */
+    position?: BreakpointCustomizable<BannerPosition>;
+    /**
+     * Defines the visual state of the banner.
+     * @default 'info'
      */
     state?: BannerState;
 } & {

package/esm/lib/components/banner.wrapper.mjs

@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
 import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
 import { syncRef } from '../../utils.mjs';
 
-const PBanner = /*#__PURE__*/ forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, state = 'info', className, ...rest }, ref) => {
+const PBanner = /*#__PURE__*/ forwardRef(({ description = '', dismissButton = true, heading = '', headingTag = 'h5', onDismiss, open = false, position = { base: 'bottom', s: 'top' }, state = 'info', className, ...rest }, ref) => {
     const elementRef = useRef(undefined);
     useEventCallback(elementRef, 'dismiss', onDismiss);
     const WebComponentTag = usePrefix('p-banner');
-    const propsToSync = [description, dismissButton, heading, headingTag, open, state];
+    const propsToSync = [description, dismissButton, heading, headingTag, open, position, state];
     useBrowserLayoutEffect(() => {
         const { current } = elementRef;
-        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+        ['description', 'dismissButton', 'heading', 'headingTag', 'open', 'position', 'state'].forEach((propName, i) => (current[propName] = propsToSync[i]));
     }, propsToSync);
     const props = {
         ...rest,

package/esm/lib/components/button-pure.wrapper.d.ts

@@ -3,10 +3,12 @@ import type { BreakpointCustomizable, ButtonPureAlignLabel, SelectedAriaAttribut
 export type PButtonPureProps = BaseProps & {
     /**
      * Displays the button in its active state.
+     * @default false
      */
     active?: boolean;
     /**
      * Aligns the label.
+     * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
@@ -15,10 +17,12 @@ export type PButtonPureProps = BaseProps & {
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
      * The color.
+     * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -27,10 +31,12 @@ export type PButtonPureProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown.
+     * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
@@ -39,6 +45,7 @@ export type PButtonPureProps = BaseProps & {
     iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -47,18 +54,22 @@ export type PButtonPureProps = BaseProps & {
     name?: string;
     /**
      * Size of the button.
+     * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
+     * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonPureType;
     /**
      * Shows an underline under the label.
+     * @default false
      */
     underline?: boolean;
     /**
@@ -69,10 +80,12 @@ export type PButtonPureProps = BaseProps & {
 export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Displays the button in its active state.
+     * @default false
      */
     active?: boolean;
     /**
      * Aligns the label.
+     * @default 'end'
      */
     alignLabel?: BreakpointCustomizable<ButtonPureAlignLabel>;
     /**
@@ -81,10 +94,12 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     aria?: SelectedAriaAttributes<ButtonPureAriaAttribute>;
     /**
      * The color.
+     * @default 'primary'
      */
     color?: ButtonPureColor;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -93,10 +108,12 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown.
+     * @default 'arrow-right'
      */
     icon?: ButtonPureIcon;
     /**
@@ -105,6 +122,7 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -113,18 +131,22 @@ export declare const PButtonPure: import("react").ForwardRefExoticComponent<Omit
     name?: string;
     /**
      * Size of the button.
+     * @default 'sm'
      */
     size?: BreakpointCustomizable<ButtonPureSize>;
     /**
      * Stretches the area between icon and label to max available space.
+     * @default false
      */
     stretch?: BreakpointCustomizable<boolean>;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonPureType;
     /**
      * Shows an underline under the label.
+     * @default false
      */
     underline?: boolean;
     /**

package/esm/lib/components/button-tile.wrapper.d.ts

@@ -3,6 +3,7 @@ import type { ButtonTileAlign, SelectedAriaAttributes, ButtonTileAriaAttribute,
 export type PButtonTileProps = BaseProps & {
     /**
      * Alignment of button and description.
+     * @default 'bottom'
      */
     align?: ButtonTileAlign;
     /**
@@ -11,10 +12,12 @@ export type PButtonTileProps = BaseProps & {
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
      * Aspect ratio of the button-tile.
+     * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
     /**
      * Displays the button-tile as compact version with description and button icon only.
+     * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
@@ -23,14 +26,17 @@ export type PButtonTileProps = BaseProps & {
     description: string;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
      * Show gradient.
+     * @default false
      */
     gradient?: boolean;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
+     * @default 'none'
      */
     icon?: ButtonTileIcon;
     /**
@@ -43,24 +49,29 @@ export type PButtonTileProps = BaseProps & {
     label: string;
     /**
      * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
      * Font size of the description.
+     * @default 'medium'
      */
     size?: BreakpointCustomizable<ButtonTileSize>;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonTileType;
     /**
      * Font weight of the description.
+     * @default 'semi-bold'
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 };
 export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
     /**
      * Alignment of button and description.
+     * @default 'bottom'
      */
     align?: ButtonTileAlign;
     /**
@@ -69,10 +80,12 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     aria?: SelectedAriaAttributes<ButtonTileAriaAttribute>;
     /**
      * Aspect ratio of the button-tile.
+     * @default '4/3'
      */
     aspectRatio?: BreakpointCustomizable<ButtonTileAspectRatio>;
     /**
      * Displays the button-tile as compact version with description and button icon only.
+     * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
@@ -81,14 +94,17 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     description: string;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
      * Show gradient.
+     * @default false
      */
     gradient?: boolean;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
+     * @default 'none'
      */
     icon?: ButtonTileIcon;
     /**
@@ -101,18 +117,22 @@ export declare const PButtonTile: import("react").ForwardRefExoticComponent<Omit
     label: string;
     /**
      * Disables the button-tile and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
      * Font size of the description.
+     * @default 'medium'
      */
     size?: BreakpointCustomizable<ButtonTileSize>;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonTileType;
     /**
      * Font weight of the description.
+     * @default 'semi-bold'
      */
     weight?: BreakpointCustomizable<ButtonTileWeight>;
 } & {

package/esm/lib/components/button.wrapper.d.ts

@@ -7,10 +7,12 @@ export type PButtonProps = BaseProps & {
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
      * Displays the button in compact mode.
+     * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -19,10 +21,12 @@ export type PButtonProps = BaseProps & {
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
+     * @default 'none'
      */
     icon?: ButtonIcon;
     /**
@@ -31,6 +35,7 @@ export type PButtonProps = BaseProps & {
     iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -39,6 +44,7 @@ export type PButtonProps = BaseProps & {
     name?: string;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonType;
     /**
@@ -47,6 +53,7 @@ export type PButtonProps = BaseProps & {
     value?: string;
     /**
      * The style variant of the button.
+     * @default 'primary'
      */
     variant?: ButtonVariant;
 };
@@ -57,10 +64,12 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     aria?: SelectedAriaAttributes<ButtonAriaAttribute>;
     /**
      * Displays the button in compact mode.
+     * @default false
      */
     compact?: BreakpointCustomizable<boolean>;
     /**
      * Disables the button. No events will be triggered while disabled state is active.
+     * @default false
      */
     disabled?: boolean;
     /**
@@ -69,10 +78,12 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     form?: string;
     /**
      * Shows or hides the label. For better accessibility, it is recommended to show the label.
+     * @default false
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
      * The icon shown. By choosing 'none', no icon is displayed.
+     * @default 'none'
      */
     icon?: ButtonIcon;
     /**
@@ -81,6 +92,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     iconSource?: string;
     /**
      * Disables the button and shows a loading indicator. No events will be triggered while loading state is active.
+     * @default false
      */
     loading?: boolean;
     /**
@@ -89,6 +101,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     name?: string;
     /**
      * Specifies the type of the button.
+     * @default 'submit'
      */
     type?: ButtonType;
     /**
@@ -97,6 +110,7 @@ export declare const PButton: import("react").ForwardRefExoticComponent<Omit<imp
     value?: string;
     /**
      * The style variant of the button.
+     * @default 'primary'
      */
     variant?: ButtonVariant;
 } & {