Button

An accessible button. .fnc(...) runs on activation (click, Enter, Space). Unstyled except .preset(default).

#A counter

Button is an accessible button: .fnc { … } runs when it is clicked, tapped, or pressed with Enter or Space. It is unstyled; style it like a Container, or start from .preset(default). Every Button gives a little when pressed.

Page(
  .name(Counter)
  .route('/')
  var int count = 0
  Scaffold(
    .config(color: canvas)
    .body(
      Row(
        .config(gap: 12, padding: all(24), yAlign: mid)
        Button(
          .config(color: accent, cornerRadius: 10, padding: sym(x: 18, y: 10))
          .fnc { count++ }
          .obj(Text(.config(color: onAccent, weight: semibold) .obj('Add one')))
        )
        Button(
          .preset(default)
          .config(disabled: count == 0, label: 'Reset')
          .fnc { count = 0 }
        )
        Text(.config(size: 18, weight: semibold) .obj('$count'))
      )
    )
  )
)

label gives a Button plain text; for styled content put a Text in its .obj. Either way the text is its accessible name. In a Form, submit: true makes a Button submit it.

#Config keys

Group .border(align, color, width, style, sides): Border settings grouped: .border(align: in, color: #0d0d0d, width: 2).

#Slots

• .obj: one object, the default slot

#Events

.fnc runs on press. .on(...) accepts tap, press, hover, hoverEnd, focus, blur, key, drag, swipe, mount, unmount, visible.