Module

Lumi.Components2.Button

Package
purescript-lumi-components
Repository
lumihq/purescript-lumi-components

#Button Source

data Button

#ButtonState Source

#ButtonType Source

#ButtonProps Source

type ButtonProps = (ariaLabel :: Maybe String, autoFocus :: Boolean, component :: Button, content :: Array JSX, onPress :: Aff Unit, state :: ButtonState, tabIndex :: Maybe Int, type :: ButtonType)

#LinkButtonProps Source

type LinkButtonProps = (ariaLabel :: Maybe String, autoFocus :: Boolean, component :: LinkButton, content :: Array JSX, loadingContent :: Maybe (Array JSX), onPress :: Aff Unit, state :: ButtonState, tabIndex :: Maybe Int, type :: ButtonType)

#LinkButton Source

#ButtonModifier Source

type ButtonModifier c = forall r. PropsModifier (ariaLabel :: Maybe String, autoFocus :: Boolean, component :: c, onPress :: Aff Unit, state :: ButtonState, tabIndex :: Maybe Int, type :: ButtonType | r)

#loadingContent Source

loadingContent :: Array JSX -> (forall r. PropsModifier (component :: LinkButton, loadingContent :: Maybe (Array JSX) | r))

loadingContent sets the content to display while a link button is in its loading state. The size of the link button will always fit the larger content, regardless which state it's in.

#recolor Source

recolor :: forall c. (ColorMap Color -> Color) -> ButtonModifier c

#submit Source

submit :: forall c. ButtonState -> ButtonModifier c

A form submit button. This helper takes the button state as an argument because a form's buttons are generally tied to the validity and onSubmit behavior of the form, rather than providing an onPress action to the button itself.

#reset Source

reset :: forall c. ButtonState -> ButtonModifier c

A form reset button. This helper takes the button state as an argument because a form's buttons are generally tied to the validity and onSubmit behavior of the form, rather than providing an onPress action to the button itself.

#state Source

state :: forall c. ButtonState -> ButtonModifier c

Set the button state. Generally you'll want to use submit or reset instead, but this can still be useful for onPress buttons which need to be disabled while some page state is invalid or share in a collective page loading state.

Note: When a page is in a loading state, any buttons which were not interacted with should be set to Disabled, not Loading. A row of buttons containing the same spinner looks strange. You also do not need to track which button was interacted with, usually, because the onPress loading state will override this one within the button pressed.

#onPress Source

onPress :: forall c. Aff Unit -> ButtonModifier c

A button with customized onPress behavior. The button will automatically display a loading state while the action is in-progress. Using onPress on a button multiple times chains the effects together from the first applied, out.

#onPress' Source

onPress' :: forall c. (Aff Unit -> Aff Unit) -> ButtonModifier c

Like onPress but allows additional control over how the provided behavior interacts with any existing behavior.

#autoFocus Source

autoFocus :: forall c. ButtonModifier c

Auto-focus this button. Only one element on the page should have autoFocus set at a time.

#tabIndex Source

tabIndex :: forall c. Int -> ButtonModifier c

#ariaLabel Source

ariaLabel :: forall c. String -> ButtonModifier c

Set ariaLabel when the button content is not legible text, for example a button that only contains an X might set this label to "Close".

Modules
JSS
Lumi.Components
Lumi.Components.Badge
Lumi.Components.Border
Lumi.Components.Breadcrumb
Lumi.Components.Button
Lumi.Components.ButtonGroup
Lumi.Components.Card
Lumi.Components.CardGrid
Lumi.Components.Color
Lumi.Components.Column
Lumi.Components.Details
Lumi.Components.Divider
Lumi.Components.DropdownButton
Lumi.Components.EditableTable
Lumi.Components.FetchCache
Lumi.Components.FixedPrecisionInput
Lumi.Components.Form
Lumi.Components.Form.Defaults
Lumi.Components.Form.Internal
Lumi.Components.Form.Table
Lumi.Components.Form.Validation
Lumi.Components.Icon
Lumi.Components.Images
Lumi.Components.Input
Lumi.Components.InputGroup
Lumi.Components.LabeledField
Lumi.Components.Layouts
Lumi.Components.Layouts.Centered
Lumi.Components.Layouts.OneColumnWithHeader
Lumi.Components.Layouts.Tabs
Lumi.Components.Link
Lumi.Components.List
Lumi.Components.Loader
Lumi.Components.Lockup
Lumi.Components.Modal
Lumi.Components.NativeSelect
Lumi.Components.Navigation
Lumi.Components.Orientation
Lumi.Components.Pagination
Lumi.Components.Pill
Lumi.Components.Progress
Lumi.Components.Responsive
Lumi.Components.Row
Lumi.Components.Select
Lumi.Components.Select.Backend
Lumi.Components.Size
Lumi.Components.Slider
Lumi.Components.Spacing
Lumi.Components.Status
Lumi.Components.StatusSlat
Lumi.Components.Styles
Lumi.Components.Svg
Lumi.Components.Tab
Lumi.Components.Table
Lumi.Components.Table.FilterDropdown
Lumi.Components.Text
Lumi.Components.Textarea
Lumi.Components.Toast
Lumi.Components.Tooltip
Lumi.Components.Upload
Lumi.Components.Utility.ReactRouter
Lumi.Components.Wizard
Lumi.Components.ZIndex
Lumi.Components2.Box
Lumi.Components2.Button
Lumi.Components2.ButtonGroup
Lumi.Components2.Clip
Lumi.Components2.Link
Lumi.Components2.QRCode
Lumi.Components2.ScrollObserver
Lumi.Components2.Slat
Lumi.Components2.Text
Lumi.Styles
Lumi.Styles.Border
Lumi.Styles.Box
Lumi.Styles.Clip
Lumi.Styles.Link
Lumi.Styles.Loader
Lumi.Styles.Responsive
Lumi.Styles.Slat
Lumi.Styles.Theme