Home Playground

get started

what is rhyme? your first app how rhyme works

core concepts

understanding actions [blocks] $variables

tags

-keywords #colors !icons %images ^fonts ~sounds @resources

reference

$SPECIAL variables Variable Types

action sets

understanding action sets acknowledgement actions AI announcements appgroup audio auth avatars background barcodes blog browser buttons calendar chat client clipboard color column compiler components config core CSS data datetime debug decorator directive divider editor editors effects email enter error events examples exec feedback fields file flow fonts footers form goto groq group headers help HTML HTTP icons if images inbox init input inputs interaction keys language layout lists localstorage location log logic logicfn loops math media menus messaging mock modifier modules navigation network notifications numbers openai overlays paragraph platform print profile progress publish random recipes resend resources rhyme row rows screens search secrets security selects server services shell shield sim social sounds source specialfx speech stacks styling system table test testing text upload users utilities utils validate validation variables video view voice

actions

.10x1-image .12x1-image .16x9-image .1x1-image .1x2-image .1x3-image .1x4-image .1x6-image .1x8-image .2x1-image .2x3-image .3x1-image .3x2-image .4x1-image .4x3-image .4x5-image .5x4-image .6x1-image .6x9-image .8x1-image .alt .app-frame .app-iphone .app-laptop .app-tablet .avatar .background-animated-gradient .background-color .background-gradient .background-image .background-video .bottom-panel .brand-screen .busy-button .button .checkbox-field .circle-button .circle-image .click .color-input .continue-button .date-input .devfooter .dicebear-avatar .enter .fieldset .fixed-footer .footer .footer-nav .full-panel .golden-image .goto .gradient .help .hide .hide-in-progress .hover-over .icon-avatar .icon-button .image .image-avatar .image-button .image-title .initials-avatar .left-panel .link .live-search .menu .menu-item .nav-button .navto .number .option .overlay .paragraph .paragraph-text .password-field .password-panel .pinpad-input .placeholder .popup .popup-screen .progress-bar .progress-circle .progress-circle-with-value .qrcode .radio-field .rhappsody .rhyme-example .rhyme-live .rhyme-source .right-panel .row .run .screen .screen-background .search .select .select-field .set .show-in-progress .sim-app .simulate .simulator .slider-input .splash-screen .text .text-field .textbox-field .textbox-input .time-input .tint .tiptext .top-panel .turnstile .upload-csv .upload-file .upload-file-input .upload-image .upload-json .user-login .wait .when-load-complete /action /actions /app /blocks /boot /build /clear /clear-inbox /compile /compiler /current /delay /delete-appgroup /delete-image /dev /edit /edit-block /files /help /hide /images /inbox /list-apps /list-groups /load /login /login-if-needed /logout /mock-date /new /new-appgroup /new-image /publish /regen-keys /secrets /send-inbox-message /set /sets /shell /show /source /source-default /status /users /who +paste-image +when-close add add-days add-line add-row add-text add-weeks admin-login allow-dynamic-actions app-font app-image app-password app-sound average background-image bluesky break browser-version calculate capitalize character clear-client clear-icons clear-image clear-images clear-inbox clear-profile close-menu color compile confetti console-error console-info console-log console-var contains continue core-kv-get core-kv-put corner-banner create-key create-table csv day-names days-between days-until decode-secret decrement decrypt default default-style delay delete delete-all-videos delete-app-data delete-app-image delete-column delete-inbox-message delete-key delete-public-app-data delete-public-user-data delete-row delete-saved delete-user-data details distance-between divide down-key editor-login editor-onkey enable-shell-shortcut encrypt english ensure-email enter-date enter-email enter-family-name enter-fullname enter-given-name enter-helptext enter-key enter-number enter-password enter-phone enter-text enter-time equals error-line escape-key exit-module facebook fake fake-date fake-table fake-time fill-column filter-group first-row font foreach forget fullscreen-error get-ip-location get-item-number get-location get-recipe get-row github goto groq-ai-chat groq-models have hide host-call http-delete http-get http-post http-put icon if if-fail if-is-closed if-is-open if-success image increment init-all init-auth init-chat init-compiler init-help init-images instagram is-date is-greater-than is-group is-item is-less-than is-number is-text is-time is-valid-email is-valid-phone key last-row launch-module left-key length-of linkedin list-actions list-actionsets list-app-data list-app-images list-areas list-color-palettes list-colors list-compilers list-dynamic-actions list-fonts list-icons list-images list-inbox list-public-app-data list-public-user-data list-recipes list-saved list-secrets list-user-data list-videos load load-app-data load-binary-file load-compiler load-json-file load-public-app-data load-public-user-data load-saved load-source load-text-file load-user-data logic loop lowercase manager-login max missing mod_tint modulo month-names multiply new-profile not not-equals on-incoming-chat-message open-browser open-browser-window open-menu openai-chat person pick-random print print-error print-header profile protect-with-password proxy publish-bin publish-html publish-private random-between random-dice-roll random-digits random-row random-text random-uuid register-actionset reload remember remove-secret render-recipe repeat resend-send-email reset-client resize-image restore-profile resume return right-key round round-down round-up run save save-app-data save-app-image save-public-app-data save-public-user-data save-source save-user-data say schedule secret send-email send-to-inbox server-run set set-active-schedule set-app-source set-app-title set-brand-color set-css-variable set-debug-ui set-default set-default-font set-dev-mode set-email-bcc set-email-body set-email-cc set-email-from set-email-service set-email-subject set-email-to set-groq-api-key set-http-body set-http-header set-http-timeout set-iconset set-image set-language set-message-body set-message-from set-message-subject set-mock-mode set-resend-api-key set-secret set-sound set-start-block set-video set-voice set-voice-language shield show slide-down slide-left slide-right slide-up slot sort-column sort-group sort-table source-block-list source-delete-block source-get-block source-join-blocks source-split-blocks source-update-block space-between-lines space-key spanish split-text stack store-profile style su-accounts subtract sync-time-from-server test test-owner-auth test-server timer-start timer-stop toggle-menu top-left twitter typed-getters-example unpack-row unshield unsubscribe up-key upload-app-image uppercase use use-modules user user-data user-login vibrate wait waitfor when youtube

advanced

Other

Tags

Understanding Tags Color Tags Font Tags Icon Tags Image Tags

On this page

Overview
Basic Usage
Parameters
Examples
- Example 1: Basic Usage
- Example 2: With Variables
Tips
Related Actions

Resources

Rhappsody Community

© 2025 Rhappsody

.icon-button

Add icons to your interface

Overview

The .icon-button action is part of the buttons set in Rhyme. Add icons to your interface.

Category: Buttons
Area: 🎨 UI & Presentation

Basic Usage

.icon-button "Hello, World!"

Parameters

Documentation for this action’s parameters is coming soon.

Examples

Example 1: Basic Usage

.icon-button "Hello, World!"

Example 2: With Variables

$my-variable: "some value"
.icon-button $my-variable

Tips

This action is part of the buttons set
Common use case: Creating visual elements and layouts

Related actions from the buttons set will be listed here.