Dropdown
Attaches a button menu to an element
name | type | default | description |
|---|---|---|---|
| align | "left" | "right" | left | The alignment of the dropdown relative to the button |
| buttonProps | { as?: "a" | undefined; children: ReactNode; disabled?: boolean | undefined; prefix?: ReactNodeNoStrings; loading?: boolean | undefined; shape?: "circle" | "rectangle" | "square" | "rounded" | undefined; ... 9 more ...; color?: PrimaryColor | undefined; } & Omit<...> & WithoutAnchor & WithColorStyle | { as?: "a" | undefined; children: ReactNode; disabled?: boolean | undefined; prefix?: ReactNodeNoStrings; loading?: boolean | undefined; shape?: "circle" | "rectangle" | "square" | "rounded" | undefined; ... 9 more ...; color?: PrimaryColor | undefined; } & Omit<...> & WithAnchor & WithColorStyle | - | The props passed to the button for the dropdown |
| cancelLabel | string | Cancel | The label for the cancel button when showing an action sheet |
| chevron | boolean | true | A chevron in the button |
| children | ReactNode | - | An optional custom dropdown button |
| direction | "down" | "up" | down | The direction that the dropdown menu will open from |
| height | string | number | - | The height of the dropdown menu. If specified, dropdown will be scrollable |
| indicatorColor | "background" | "border" | "accent" | "blue" | "green" | "yellow" | "red" | "orange" | "indigo" | "pink" | "purple" | "grey" | "accentActive" | "accentLight" | "accentDim" | "accentPrimary" | "accentBright" | "accentSurface" | "blueActive" | "blueLight" | "blueDim" | "bluePrimary" | "blueBright" | "blueSurface" | "greenActive" | "greenLight" | "greenDim" | "greenPrimary" | "greenBright" | "greenSurface" | "yellowActive" | "yellowLight" | "yellowDim" | "yellowPrimary" | "yellowBright" | "yellowSurface" | "redActive" | "redLight" | "redDim" | "redPrimary" | "redBright" | "redSurface" | "orangeActive" | "orangeLight" | "orangeDim" | "orangePrimary" | "orangeBright" | "orangeSurface" | "indigoActive" | "indigoLight" | "indigoDim" | "indigoPrimary" | "indigoBright" | "indigoSurface" | "pinkActive" | "pinkLight" | "pinkDim" | "pinkPrimary" | "pinkBright" | "pinkSurface" | "purpleActive" | "purpleLight" | "purpleDim" | "purplePrimary" | "purpleBright" | "purpleSurface" | "greyActive" | "greyLight" | "greyDim" | "greyPrimary" | "greyBright" | "greySurface" | "text" | "textPrimary" | "textSecondary" | "textAccent" | "backgroundPrimary" | "backgroundSecondary" | "teal" | "tealActive" | "tealLight" | "tealDim" | "tealPrimary" | "tealBright" | "tealSurface" | "borderPrimary" | "textTertiary" | - | The colour of the indicator |
| isOpen | boolean | - | If defined, dropdown is controlled externally |
| items | DropdownItem[] | [] | An array of objects conforming to the DropdownItem interface. |
| keepMenuOnTop | boolean | false | If true, the dropdown will stay above the button when open |
| label | ReactNode | - | The label of the dropdown button |
| menuLabelAlign | "center" | "flex-end" | "flex-start" | - | The alignment of the menu button labels |
| mobileWidth | string | number | 150 | The width of the dropdown menu on mobile, in px |
| responsive | boolean | true | If true, displays an action sheet when in mobile |
| setIsOpen | Dispatch<SetStateAction<boolean>> | - | - |
| shortThrow | boolean | false | If true, decreases the distance of the dropdown animation. |
| width | string | number | 150 | The width of the dropdown menu, in px |
name | type | default | description |
|---|---|---|---|
| color | "blue" | "green" | "indigo" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "grey" | "accent" | "accentSecondary" | "accentSecondaryHover" | "accentTertiary" | "accentText" | "accentGradient" | "background" | "backgroundHide" | "backgroundSecondary" | "backgroundTertiary" | "border" | "borderSecondary" | "borderTertiary" | "foreground" | "foregroundSecondary" | "foregroundSecondaryHover" | "foregroundTertiary" | "groupBackground" | "groupBorder" | "gradients" | "text" | "textPlaceholder" | "textSecondary" | "textTertiary" | - | The color of the label. |
| disabled | boolean | - | The disabled attribute of button element. |
| href | string | - | A link that opens on click. |
| icon | ReactNode | - | An icon that leads the label. |
| label | string | - | The text label. |
| onClick | () => void | - | An event handler for click events. |
| showIndicator | boolean | Colors | - | A dot indicator. |