aws-northstar
Version:
NorthStar Design System
78 lines (74 loc) • 2.92 kB
TypeScript
/** *******************************************************************************************************************
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License").
You may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. *
******************************************************************************************************************** */
import { EventHandler, FunctionComponent, MouseEventHandler, ReactNode } from 'react';
export interface ButtonDropdownItem {
/**
* The text to display for the item.
* */
text?: ReactNode;
/**
* Disables the drop down item, not allowing it to be clicked.
* */
disabled?: boolean;
/**
* You can supply an Item array to display nested under a parent Item heading. Only two levels of item nesting can be provided.
* */
items?: ButtonDropdownItem[];
/**
* Fired when the user clicks on drop down item. If nested Item arrays are provided, the parent onClick handler will be treated as a heading and ignored.
* */
onClick?: EventHandler<any>;
}
export interface ButtonDropdownProps {
/**
* The content to be displayed in the button.
* */
content: ReactNode;
/**
* Determines the general styling of the underlying button. Only primary and normal variants are supported.
* */
variant?: 'normal' | 'primary';
/**
* Renders the button as being in a loading state.
* */
loading?: boolean;
/**
* Renders the button as disabled and prevents clicks.
* */
disabled?: boolean;
/**
* Array of content to be displayed in the Button drawer.
* */
items?: ButtonDropdownItem[];
/**
* Disables the default dropdown arrow icon
* */
disableArrowDropdown?: boolean;
/**
* The className of the menu item to override the styling of menu item.
*/
menuItemClassName?: string;
/**
* Indicating whether the button will be displayed on the dark theme (e.g., header bar)
* */
darkTheme?: boolean;
/**
* Fired when the user clicks on the drop down button.
* */
onClick?: MouseEventHandler<HTMLElement>;
}
/**
* A button dropdown is used to group a set of actions under one button.
*/
declare const ButtonDropdown: FunctionComponent<ButtonDropdownProps>;
export default ButtonDropdown;