Options
Basic
API Reference
CarouselRoot
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| page | Controlled value for the current page | number | ---- | False |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | {} & { alignContent?: Globals | ScaleValue | Index | AlignContent; alignItems?: Globals | ScaleValue | Index | AlignItems; ... 425 more ...; vectorEffect?: Globals | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; } | ---- | False |
| defaultPage | Uncontrolled value for the initial page shown | number | ---- | False |
| onPageChange | callback for page change | () => void | ---- | False |
| itemsPerPage | number of items to move when the page changes @defaut auto | enum number | auto | auto | False |
| onDescendentFocus | callback for internal focus | (index: number) => void | () => undefined | False |
CarouselHeader
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | {} & { alignContent?: Globals | ScaleValue | Index | AlignContent; alignItems?: Globals | ScaleValue | Index | AlignItems; ... 425 more ...; vectorEffect?: Globals | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; } | ---- | False |
CarouselHeaderContent
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | {} & { alignContent?: Globals | ScaleValue | Index | AlignContent; alignItems?: Globals | ScaleValue | Index | AlignItems; ... 425 more ...; vectorEffect?: Globals | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; } | ---- | False |
CarouselHeaderActions
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | {} & { alignContent?: Globals | ScaleValue | Index | AlignContent; alignItems?: Globals | ScaleValue | Index | AlignItems; ... 425 more ...; vectorEffect?: Globals | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; } | ---- | False |
CarouselTitle
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | {} & { alignContent?: Globals | ScaleValue | Index | AlignContent; alignItems?: Globals | ScaleValue | Index | AlignItems; ... 425 more ...; vectorEffect?: Globals | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; } | ---- | False |
CarouselPreviousButton
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| icon | enum left | right | center | none | center | False | |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS<{ sm: `(max-width: calc(${string} - 1px))`; md: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; lg: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; xl: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notS... | ---- | False |
| variant | enum primary | secondary | cta | primary | False | |
| density | enum default | compact | compact | False | |
| isOutline | enum boolean | true | false | ---- | False | |
| asChild | enum boolean | ---- | False |
CarouselNextButton
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| icon | enum left | right | center | none | center | False | |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS<{ sm: `(max-width: calc(${string} - 1px))`; md: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; lg: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; xl: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notS... | ---- | False |
| variant | enum primary | secondary | cta | primary | False | |
| density | enum default | compact | compact | False | |
| isOutline | enum boolean | true | false | ---- | False | |
| asChild | enum boolean | ---- | False |
CarouselContent
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | {} & { alignContent?: Globals | ScaleValue | Index | AlignContent; alignItems?: Globals | ScaleValue | Index | AlignItems; ... 425 more ...; vectorEffect?: Globals | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; } | ---- | False |
CarouselFooter
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | {} & { alignContent?: Globals | ScaleValue | Index | AlignContent; alignItems?: Globals | ScaleValue | Index | AlignItems; ... 425 more ...; vectorEffect?: Globals | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; } | ---- | False |
CarouselDots
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| label | The input's label text, required for accessibility | string | Pagination Dots | False |
| css | WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides. | CSS | ---- | False |
| unitName | Specifies the type of element represented by the dots (e.g., "Page") | string | ---- | False |