Button (button)
Buttons allow users to take actions, and make choices, with a single tap.
🔗 External documentation.
| ID | Label | Description | Schema |
|---|---|---|---|
| label | Label | The button label | |
| url | URL | The button URL. Optional. |
|
| icon | Icon | Icon list in https://fonts.google.com/icons?selected=Material+Icons |
|
| icon_position | Icon position |
|
id: button
label: Button
description: 'Buttons allow users to take actions, and make choices, with a single tap. '
homepage: 'https://m2.material.io/components/buttons'
variants:
default:
id: default
label: Text
outlined:
id: outlined
label: Outlined
raised:
id: raised
label: 'Raised (contained)'
unelevated:
id: unelevated
label: Unelevated
slots:
label:
id: label
label: Label
description: 'The button label'
props:
url:
id: url
label: URL
description: 'The button URL. Optional.'
schema:
type: string
format: uri-reference
icon:
id: icon
label: Icon
description: 'Icon list in https://fonts.google.com/icons?selected=Material+Icons'
schema:
type: string
icon_position:
id: icon_position
label: 'Icon position'
schema:
type: string
enum:
- left
- right
library:
js:
'https://data.dilla.io/material_2/components/button/button_init.js': { }
dependencies:
- material_icons
id: button
examples:
preview:
id: preview
label: Preview
renderable:
'@component': button
label: Submit
url: 'http://example.com'
icon: search
icon_position: left