---
id: portfolio.ds.carousel-arrow
name: "Carousel Arrow"
type: subcomponent
status: active
relations: [{"type":"composes","target":"portfolio.ds.texture-glass-default"},{"type":"related_to","target":"portfolio.ds.extra-small-corner-radius"},{"type":"related_to","target":"portfolio.ds.focus-interaction-states"},{"type":"related_to","target":"portfolio.ds.icons"},{"type":"related_to","target":"portfolio.ds.project-hero-carousel"}]
sources: ["apps/portfolio-site/src/design-system/docs/carousel-arrow.astro","apps/portfolio-site/src/lib/designSystemRegistry.ts","packages/design-system/src/components/CarouselArrow.astro"]
catalog: ["apps/portfolio-site/src/design-system/docs/carousel-arrow.astro"]
previews: ["apps/portfolio-site/src/design-system/docs/carousel-arrow.astro"]
---
# Carousel Arrow

## Purpose

Accessible left or right navigation control for `Project Hero Carousel`.

## Contract

- Belongs directly under `Project Hero Carousel`.
- Uses one shared markup, one Lucide arrow, and one style contract for `left` and `right` directions; the left variant mirrors the same icon instead of rendering a second icon.
- Keeps a fixed `48px × 48px` hit target with a centered black `36px × 36px` Lucide arrow.
- Uses Extra Small Corner Radius (`--radius-xs`, `4px`).
- Consumes the complete `Default Glass` texture token set for its borderless translucent background, backdrop filter, and subtle shadow.
- Shows the canonical interaction-state review set: normal, hover, focus, focus-visible, pressed, selected, and disabled, without changing dimensions.
- Uses the shared extra-contrast focus and focus-visible rings so the blue indicator remains distinct over varied media.
- Requires an accessible action label; the visual arrow is decorative to assistive technology.
- Accepts native button attributes and leaves carousel state, positioning, timing, and visibility to the parent.
- Does not render on Mobile once composed into Project Hero Carousel; that policy belongs to the parent composition.

## Use

- Previous and next controls in Project Hero Carousel.
- Isolated Design System review over an abstract media context.

## Do Not Use

- Do not use it as a generic back button or disclosure control.
- Do not put carousel selection or timer logic inside the component.
- Do not let the control reserve layout space after the parent hides it.

## Preview-Only Exception

- The `Carousel Arrow` Design System page may use a detailed image as its Preview background and allow the rendered control to be dragged across that image.
- This exception exists only to inspect the Default Glass texture over varied light, dark, and detailed media regions.
- Dragging and the Preview background are not `Carousel Arrow` props, production behavior, or generic capabilities of the shared Preview component.
- Do not copy this draggable media-fixture pattern to another Design System page without a separate explicit decision.

## Props

| Prop | Values | Purpose |
| --- | --- | --- |
| `direction` | `left`, `right` | Selects the arrow direction. |
| `label` | string | Gives the button its accessible action name. |
| `disabled` | boolean | Disables pointer and keyboard activation. |
| `type` | native button type | Defaults to `button`. |

## Accessibility

- Uses a native button with a direction-specific accessible label.
- Keeps the icon hidden from assistive technology.
- Preserves a 48px hit target across supported non-Mobile breakpoints.
- Shows the shared extra-contrast focus-visible ring with a white separation gap.

## Verification

- Confirm both direction variants use the same component and remain `48px × 48px`.
- Confirm the arrow remains centered and `36px × 36px` through every state.
- Confirm the glass surface remains readable over the abstract media preview.
- Confirm dragging remains bounded by the Carousel Arrow Preview and does not appear in the component API or production behavior.
- Confirm keyboard focus and disabled behavior match the documented contract.
- Run `scripts/design-system-graph --check --no-write`.