mithril-materialized
Version:
A materialize library for mithril.
89 lines (88 loc) • 2.67 kB
TypeScript
import m, { FactoryComponent, Attributes } from 'mithril';
import { MaterialPosition, IconClass, ButtonVariant } from './types';
/**
* HTML attributes that can be passed to button elements
* @deprecated Use native HTML attributes directly instead
*/
export interface HtmlAttrs {
id?: string;
for?: string;
placeholder?: string;
autofocus?: boolean;
disabled?: boolean;
type?: 'submit' | 'button' | 'reset';
}
/**
* Enhanced button attributes with improved TypeScript support
* @example
* ```typescript
* // Basic button
* m(Button, { label: 'Click me' })
*
* // Submit button with icon
* m(Button, {
* variant: 'submit',
* label: 'Save',
* iconName: 'save',
* iconClass: 'small left'
* })
*
* // Reset button
* m(Button, {
* variant: 'reset',
* label: 'Clear Form'
* })
* ```
*/
export interface ButtonAttrs extends Attributes {
/** Button label text (optional for icon-only buttons) */
label?: string;
/** Material icon name - see https://materializecss.com/icons.html */
iconName?: string;
/**
* Icon size and position class
* @example 'small', 'medium left', 'large right'
*/
iconClass?: IconClass;
/**
* Button type - determines the HTML button behavior
* @default 'button'
* @example
* ```typescript
* // Standard clickable button (default)
* variant: 'button'
*
* // Form submission button
* variant: 'submit'
*
* // Form reset button
* variant: 'reset'
* ```
*/
variant?: ButtonVariant;
/**
* @deprecated Use native HTML attributes directly instead
* Some additional HTML attributes that can be attached to the button
*/
attr?: HtmlAttrs;
/** Tooltip text to display on hover */
tooltip?: string;
/**
* Tooltip position
* @fixed typo: tooltipPostion -> tooltipPosition
*/
tooltipPosition?: MaterialPosition;
}
/**
* A factory to create new buttons.
*
* @example FlatButton = ButtonFactory('a.waves-effect.waves-teal.btn-flat');
*/
export declare const ButtonFactory: (element: string, defaultClassNames: string, type?: string) => FactoryComponent<ButtonAttrs>;
export declare const Button: m.FactoryComponent<ButtonAttrs>;
export declare const LargeButton: m.FactoryComponent<ButtonAttrs>;
export declare const SmallButton: m.FactoryComponent<ButtonAttrs>;
export declare const FlatButton: m.FactoryComponent<ButtonAttrs>;
export declare const IconButton: m.FactoryComponent<ButtonAttrs>;
export declare const RoundIconButton: m.FactoryComponent<ButtonAttrs>;
export declare const SubmitButton: m.FactoryComponent<ButtonAttrs>;