> ## Documentation Index > Fetch the complete documentation index at: https://prismeai-legacy.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Button Block > Display a button. [Demo](https://demo.pages.prisme.ai/en/Button) ## Minimal usage ```yaml theme={null} # Page/Block - slug: Button content: Click me type: event value: has clicked ``` Display a button which emit an event on click. `theme` changes the colors of the button. ```yaml theme={null} # Page/Block - slug: Button content: Click me theme: info ``` Available themes are : * `default` * `info` * `success` * `error` * `warning` * `transparent` You can see all this options in the [demo page](https://demo.pages.prisme.ai/en/Buttons). You can obviously use `css` like any other block to make your very own style. `icon` add an icon left to your `content`. Value can be an url to an image file or a [icon name](./Icon). ```yaml theme={null} # Page/Block - slug: Button content: Click me icon: gear ``` [Demo](https://demo.pages.prisme.ai/en/Button#minimal-usage) ## Advanced usage `content` can ba a string, a localized string, or a blocks list: ```yaml theme={null} # Page/Block - slug: Button content: en: Click me fr: Cliquez moi ``` ```yaml theme={null} # Page/Block - slug: Button content: - slug: RichText content: click **me** ``` `type` influences on the behavior of the button. Followings types are available: * `event` will emit the event set on `value`. `value` can be just a string or an object with `event` and `payload`. ```yaml theme={null} # Page/Block - slug: Button type: event value: clicked - slug: Button type: event value: event: clicked payload: with: foo ``` * `internal` and `external` are just href links and will navigate to the link set on `value``. `value`can be a single string or an object with`href`and`popup\`. ```yaml theme={null} # Page/Block - slug: Button type: internal value: another-page - slug: Button type: internal value: href: another-page popup: true # Open in a new window ``` * `script` executes javascript set on `value`. ```yaml theme={null} # Page/Block - slug: Button type: script value: |- console.log('it works') ``` * `upload` opens a system file picker and emit the event set on `value` with the file url in payload. `value` can be a single string or an object like `value` of `event` type plus an [`accept` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept) which allow to restrict the files types the user can select. ```yaml theme={null} # Page/Block - slug: Button type: script type: upload value: upload file - slug: Button type: script type: upload value: event: upload file with: foo - slug: Button type: script type: upload value: event: upload file accept: image/* ``` * `menu` displays a menu with a list of buttons. its `value` is an array of another buttons descriptions. A menu can contains another menu and so on. ```yaml theme={null} # Page/Block - slug: Button content: Actions type: menu value: - content: First action type: event value: clicked on first action - content: second action type: event value: clicked on second action - content: Other actions type: menu value: - content: Upload something type: upload value: upload something ``` `disabled` set the button as disabled. Useless while a callback takes times. Example: ```yaml theme={null} # Page/Block - slug: Button content: Click me updateOn: update button type: event value: clicked disabled: '{{loading}}' ``` ```yaml theme={null} # Automation - emit: event: udpate button payload: loading: true - do something very long: {} - emit: event: udpate button payload: loading: false ``` `loading` replace or add an spinner icon to your button. Example: ```yaml theme={null} # Page/Block - slug: Button content: Click me updateOn: update button type: event value: clicked loading: '{{loading}}' ``` ```yaml theme={null} # Automation - emit: event: udpate button payload: loading: true - do something very long: {} - emit: event: udpate button payload: loading: false ``` You can mix it with disabled: ```yaml theme={null} # Page/Block - slug: Button content: Click me updateOn: update button type: event value: clicked loading: '{{loading}}' disabled: '{{loading}}' ``` `confirm` will ask a confirmation before trigger the action. ```yaml theme={null} # Page/Block - slug: Button content: Click me type: event value: clicked confirm: title: Are you sure? ``` `confirm` object takes the following attributes: * `title` is title of the box displayed to the user. It can be a string or a localized string: ```yaml theme={null} # Page/Block - slug: Button content: Click me type: event value: clicked confirm: title: en: Are you sure? fr: Êtes vous sur ? ``` * `label` is the main text displayed to the user. It can be a string or a localized string: ```yaml theme={null} # Page/Block - slug: Button content: Click me type: event value: clicked confirm: title: Are you sure? label: All your work will be destroyed for ever. ``` * `yesLabel` is the label of the confirm button: ```yaml theme={null} # Page/Block - slug: Button content: Click me type: event value: clicked confirm: title: Are you sure? label: All your work will be destroyed for ever. yesLabel: Yes, destroy everything ``` * `noLabel` is the label of the cancel button: ```yaml theme={null} # Page/Block - slug: Button content: Click me type: event value: clicked confirm: title: Are you sure? label: All your work will be destroyed for ever. yesLabel: Yes, destroy everything noLabel: No please, I've made a mistake ``` * `placement` position the dropdown around the button. Default will adapt automaticall but you can force with: * 'top' * 'left' * 'right' * 'bottom' * 'topLeft' * 'topRight' * 'bottomLeft' * 'bottomRight' * 'leftTop' * 'leftBottom' * 'rightTop' * 'rightBottom' ```yaml theme={null} # Page/Block - slug: Button content: Click me type: event value: clicked confirm: title: Are you sure? label: All your work will be destroyed for ever. yesLabel: Yes, destroy everything noLabel: No please, I've made a mistake placement: bottom ``` * `mode` changes the way the box is displayed. Default is `dropdown` which display a dropdown around the button. `modal` displays the box over the screen as a dialog box. ```yaml theme={null} # Page/Block - slug: Button content: Click me type: event value: clicked confirm: title: Are you sure? label: All your work will be destroyed for ever. yesLabel: Yes, destroy everything noLabel: No please, I've made a mistake mode: modal ``` [Demo](https://demo.pages.prisme.ai/en/Button#advanced-usage)