/** * PropertyPane button props. * * @public */ export interface IPropertyPaneButtonProps { /** * Display text of the element. */ text: string; /** * The type of button to render. * Default value is ButtonType.normal. */ buttonType?: PropertyPaneButtonType; /** * The button icon shown in command or hero type. */ icon?: string; /** * Description of the action this button takes. * Only used for compound buttons. */ description?: string; /** * Whether the button is disabled. */ disabled?: boolean; /** * The aria label of the button for the benefit of screen readers. */ ariaLabel?: string; /** * Detailed description of the button for the benefit of screen readers. * * Besides the compound button, other button types will need more information provided to screen reader. */ ariaDescription?: string; /** * A callback which is invoked on the button click, which takes in the existing value for the bound property * and returns the new value and which is then used to update the properties bag. This update will result in * the re-render of the PropertyPane with the new props. * * @param value - Value associated with element's target property in the properties bag. * @returns - New value for the target property, which will eventually be updated in the properties bag. * * @privateRemarks * * This is the only place where the web part developer's is allowed to pass in the callback * for an individual element. This is because, button click does not result in any property change, and hence * cannot fire the 'onChange'' event for a property, and ends up becoming a no-op. To avoid this, giving the * control back to the web part, so that web part can make act accordingly. * * todo: VSO# 233578:PropertyPane Button OnClick event api. */ onClick: (value: any) => any; } /** * Enum for all the supported button types. * * @public */ export declare enum PropertyPaneButtonType { /** * Optional completion action. * * @remarks * Typically used at the end of a form or task when paired with the Primary button OR * as a standalone button to undo an action. * Examples: "Done" button which closes a container but doesn't make a server call or * an "Undo" button when a user is uploading a file in OneDrive. */ Normal = 0, /** * Preferred completion action when paired with a Standard button. * * @remarks * Typically used at the end of a task or form. * Examples: "Create", "Save", "Send" which makes a server call. */ Primary = 1, /** * Hero button. */ Hero = 2, /** * Always used as a set with both Standard and Primary compound buttons. * * @remarks * Typically used in a confirmation dialog. * Examples: A confirmation dialog when a user discards a form or task with a possible * significant time investment such as an email or a complex form */ Compound = 3, /** * Optional actions. * * @remarks * Typically used in a command bar at the top of a view, panel and inside an inline command bar. * Examples: Command bar at the top of OneDrive, Outlook, SharePoint. Inline command bar on the * top of SharePoint web parts. */ Command = 4, /** * Same usage as Command button, when real estate does not allow for icons + labels or as secondary * actions within the command bar. * * @remarks * Typically used in Command bar in small and medium responsive web breakpoints. Also used on objects. * Examples: OneDrive small and medium responsive web breakpoint Command Bars and view icons within the * Command Bar. In SharePoint and OneDrive, Cards with social actions and images which allow users to * access the image picker. In SharePoint, formatting experiences such as formatting a story within the * Authoring experience. In Calendar, in the bottom of an event creation Callout when clicking inside * an empty time range. */ Icon = 5 } //# sourceMappingURL=IPropertyPaneButton.d.ts.map