Lumi.Components2.Button

data Button

data ButtonState

Constructors

• Enabled
• Disabled
• Loading

data ButtonType

Constructors

• Button
• Submit
• Reset

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

button :: LumiComponent ButtonProps

linkButton :: LumiComponent LinkButtonProps

type LinkButtonProps :: Row Typetype 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)

data LinkButton

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

primary :: ButtonModifier Button

secondary :: ButtonModifier Button

resize :: Size -> ButtonModifier Button

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 :: forall c. (ColorMap Color -> Color) -> ButtonModifier c

varButtonHue :: StyleProperty

varButtonHueDarker :: StyleProperty

varButtonHueDarkest :: StyleProperty

varButtonHueDisabled :: StyleProperty

varButtonGrey1 :: StyleProperty

varButtonGrey2 :: StyleProperty

varButtonBlack :: StyleProperty

varButtonWhite :: StyleProperty

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 :: 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 :: 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 :: 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' :: 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 :: forall c. ButtonModifier c

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

tabIndex :: forall c. Int -> ButtonModifier c

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".