Components & Properties
List of all NUI components and their properties
Label
Label allows you to display text on your app
html_tag - string
Example Value - "div"
The HTML tag to be used in this component. You can use other values like p , h1, i, b to better structure your app
Some tags may give unexpected results
preset - list
Example Value - ["rounded-card", "big-text"]
Apply a predefined set of styles to the component
Using Presetstext - string
Example Value - "Hello World" or "<b>Hello</b> World"
The text to display inside the component. Can be plain text or HTML
text_type - enum ("plain", "html")
Example Value - "html"
Whether to render the text as plain or HTML
text_align - enum ("left", "center", "right", "justify")
Example Value - "center"
Specifies the text alignment
font_size - string / integer
Example Value - "14" or "1.1em" or 14
The size of the text font. Supports all CSS units. Any integer or numeric string will default to px
font - string
Example Value - "Roboto"
The font family used for the Text
font_weight - string / integer
Example Value - "bold" or "400" or 600
The font weight sets the boldness of the text. Can take string or numeric values
foreground - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
background - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
height - string / number
Example Value - 400 or "400px" or "30vh"
The height of the component
width - string / number
Example Value - 400 or "400px" or "30vw"
The width of the component
visible - boolean
Example Value - True
Whether to display this component or hide it from view
border_radius - string / integer
Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"
The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_size - string / integer
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")
Example Value - "solid"
The style of the border. Defaults to None (no border)
border_color - string
Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"
The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
margin - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
padding - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
icon - icon
Example Value - "fa:user" or "fas:user" or "bi:person" or "mi:person"
Sets the icon for the component. Supports Font Awesome, Material Icons and Bootstrap Icons.
icon_align - enum ("left", "right", "top", "bottom")
Example Value - "right"
Sets the alignment of the icon with respect to the text
icon_size - string or number
Example Value - 20 or "15px" or "1.1em"
Sets the size of the icon. Supports all CSS units. Any integer or numeric string will default to px
custom_icon - string
Example Value - "<svg ...> </svg>"
Allows you to create a custom icon by directly defining the raw HTML. Useful if you wish to use images or SVGs as icons
css - string
Example Value - "font-size: 40px"
Allows injecting custom CSS into the component. Follows a simpler CSS syntax.
Using Custom CSShover_css - string
Example Value - "color: red"
Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.
Using Custom CSSicon_css - string
Example Value - "color: gold"
Allows defining custom CSS for the component's icon. Follows a simpler CSS syntax.
Using Custom CSSattributes - string
Example Value - "aria-label: close"
Add additional HTML attributes to the element using a key:value pair.
show()
When the component is shown on the screen
hide()
When the component is removed from the screen
hover()
When the mouse is hovered over the component
hover_out()
When the mouse is hovered out of the component
set_property(css_property, css_value)
Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.
add_event(event_name, event_handler)
Adds an event handler for any supported JS event. Useful for listening to events that are not directly available
Using Javascriptadd_preset(preset)
Appends a new preset to the component if it has not been added yet. Ignored otherwise
remove_preset(preset)
Removes a preset from the component if added. Ignored otherwise
toggle_preset(preset)
If the preset is already added, it will be removed. Otherwise, it will be added.
Using PresetsButton
Buttons allow you to make clickable components
html_tag - string
Example Value - "div"
The HTML tag to be used in this component.
Some tags may give unexpected results
preset - list
Example Value - ["rounded-card", "big-text"]
Apply a predefined set of styles to the component
Using Presetstext - string
Example Value - "Hello World" or "<b>Hello</b> World"
The text to display inside the component. Can be plain text or HTML
text_type - enum ("plain", "html")
Example Value - "html"
Whether to render the text as plain or HTML
text_align - enum ("left", "center", "right", "justify")
Example Value - "center"
Specifies the text alignment
font_size - string / integer
Example Value - "14" or "1.1em" or 14
The size of the text font. Supports all CSS units. Any integer or numeric string will default to px
font - string
Example Value - "Roboto"
The font family used for the Text
font_weight - string / integer
Example Value - "bold" or "400" or 600
The font weight sets the boldness of the text. Can take string or numeric values
foreground - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
background - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
height - string / number
Example Value - 400 or "400px" or "30vh"
The height of the component
width - string / number
Example Value - 400 or "400px" or "30vw"
The width of the component
visible - boolean
Example Value - True
Whether to display this component or hide it from view
enabled - boolean
Example Value - True
Whether to allow interaction on this component or not\
border_radius - string / integer
Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"
The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_size - string / integer
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")
Example Value - "solid"
The style of the border. Defaults to None (no border)
border_color - string
Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"
The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
margin - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
padding - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
icon - icon
Example Value - "fa:user" or "fas:user" or "bi:person" or "mi:person"
Sets the icon for the component. Supports Font Awesome, Material Icons and Bootstrap Icons.
icon_align - enum ("left", "right", "top", "bottom")
Example Value - "right"
Sets the alignment of the icon with respect to the text
icon_size - string or number
Example Value - 20 or "15px" or "1.1em"
Sets the size of the icon. Supports all CSS units. Any integer or numeric string will default to px
custom_icon - string
Example Value - "<svg ...> </svg>"
Allows you to create a custom icon by directly defining the raw HTML. Useful if you wish to use images or SVGs as icons
css - string
Example Value - "font-size: 40px"
Allows injecting custom CSS into the component. Follows a simpler CSS syntax.
Using Custom CSShover_css - string
Example Value - "color: red"
Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.
Using Custom CSSdisabled_css - string
Example Value - "opacity: 0.5"
Allows defining custom CSS for when the component is disabled. Follows a simpler CSS syntax.
Using Custom CSSactive_css - string
Example Value - "background: theme:Primary"
Allows defining custom CSS for when the component is active (i.e., when it has been clicked). Follows a simpler CSS syntax.
Using Custom CSSicon_css - string
Example Value - "color: gold"
Allows defining custom CSS for the component's icon. Follows a simpler CSS syntax.
Using Custom CSSattributes - string
Example Value - "aria-label: close"
Add additional HTML attributes to the element using a key:value pair.
click()
When the component is clicked
show()
When the component is shown on the screen
hide()
When the component is removed from the screen
hover()
When the mouse is hovered over the component
hover_out()
When the mouse is hovered out of the component
set_property(css_property, css_value)
Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.
add_event(event_name, event_handler)
Adds an event handler for any supported JS event. Useful for listening to events that are not directly available
Using Javascriptadd_preset(preset)
Appends a new preset to the component if it has not been added yet. Ignored otherwise
remove_preset(preset)
Removes a preset from the component if added. Ignored otherwise
toggle_preset(preset)
If the preset is already added, it will be removed. Otherwise, it will be added.
Using PresetsContainer
Containers allow you to drag other components into them. NUI does not provide any special containers, but instead one common container that can take any CSS rule.
html_tag - string
Example Value - "div"
The HTML tag to be used in this component.
Some tags may give unexpected results
preset - list
Example Value - ["rounded-card", "big-text"]
Apply a predefined set of styles to the component
Using Presetstrue_html_structure - list
Example Value - True
When enabled, the components added to it maintain a true HTML structure by removing any Anvil wrappers that might affect the styling.
Designer Only ComponentsThis property is experimental since it overrides the default add_component method in Anvil. Use with caution and thoroughly test it before deploying to production.
height - string / number
Example Value - 400 or "400px" or "30vh"
The height of the component
width - string / number
Example Value - 400 or "400px" or "30vw"
The width of the component
visible - boolean
Example Value - True
Whether to display this component or hide it from view
enabled - boolean
Example Value - True
Whether to allow interaction on this component or not\
border_radius - string / integer
Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"
The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_size - string / integer
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")
Example Value - "solid"
The style of the border. Defaults to None (no border)
border_color - string
Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"
The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
margin - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
padding - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
css - string
Example Value - "font-size: 40px"
Allows injecting custom CSS into the component. Follows a simpler CSS syntax.
Using Custom CSShover_css - string
Example Value - "color: red"
Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.
Using Custom CSSactive_css - string
Example Value - "background: theme:Primary"
Allows defining custom CSS for when the component is active (i.e., when it has been clicked). Follows a simpler CSS syntax.
Using Custom CSSattributes - string
Example Value - "aria-label: close"
Add additional HTML attributes to the element using a key:value pair.
click()
When the component is clicked
show()
When the component is shown on the screen
hide()
When the component is removed from the screen
hover()
When the mouse is hovered over the component
hover_out()
When the mouse is hovered out of the component
set_property(css_property, css_value)
Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.
add_event(event_name, event_handler)
Adds an event handler for any supported JS event. Useful for listening to events that are not directly available
Using Javascriptadd_preset(preset)
Appends a new preset to the component if it has not been added yet. Ignored otherwise
remove_preset(preset)
Removes a preset from the component if added. Ignored otherwise
toggle_preset(preset)
If the preset is already added, it will be removed. Otherwise, it will be added.
Using PresetsTextBox
TextBox allows you to take input text from the user
html_tag - string
Example Value - "input"
The HTML tag to be used in this component.
Some tags may give unexpected results
preset - list
Example Value - ["rounded-card", "big-text"]
Apply a predefined set of styles to the component
Using Presetstext - string
Example Value - "Hello World" or "<b>Hello</b> World"
The text to display inside the component. Can be plain text or HTML
type - enum ("text", "password", "email", "search", "tel", "url", "number")
Example Value - "text"
Whether to render the text as plain or HTML
placeholder - string
Example Value - "Enter Your Name"
The text to display when the user has not entered any value
text_align - enum ("left", "center", "right", "justify")
Example Value - "center"
Specifies the text alignment
font_size - string / integer
Example Value - "14" or "1.1em" or 14
The size of the text font. Supports all CSS units. Any integer or numeric string will default to px
font - string
Example Value - "Roboto"
The font family used for the Text
font_weight - string / integer
Example Value - "bold" or "400" or 600
The font weight sets the boldness of the text. Can take string or numeric values
foreground - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
background - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
height - string / number
Example Value - 400 or "400px" or "30vh"
The height of the component
width - string / number
Example Value - 400 or "400px" or "30vw"
The width of the component
visible - boolean
Example Value - True
Whether to display this component or hide it from view
enabled - boolean
Example Value - True
Whether to allow interaction on this component or not.
border_radius - string / integer
Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"
The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_size - string / integer
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")
Example Value - "solid"
The style of the border. Defaults to None (no border)
border_color - string
Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"
The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
margin - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
padding - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
css - string
Example Value - "font-size: 40px"
Allows injecting custom CSS into the component. Follows a simpler CSS syntax.
Using Custom CSSfocus_css - string
Example Value - "border: solid black 2px"
Allows defining custom CSS for when the component is focused. Follows a simpler CSS syntax.
Using Custom CSShover_css - string
Example Value - "color: red"
Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.
Using Custom CSSdisabled_css - string
Example Value - "opacity: 0.5"
Allows defining custom CSS for when the component is disabled. Follows a simpler CSS syntax.
Using Custom CSSplaceholder_css - string
Example Value - "color: #aaa"
CSS styles applied to the placeholder text
Using Custom CSSattributes - string
Example Value - "aria-label: close"
Add additional HTML attributes to the element using a key:value pair.
pressed_enter()
When the Enter key is pressed on the component
change()
Fires when the value is changed and the component loses focus (This behavior is different from the default change event on anvil since it doesn't fire immediately after the value is changed).
input()
Fires immediately when the value is changed. (This behavior is similar to the default change event on Anvil)
focus()
When the component receives focus
lost_focus()
When the component loses focus
show()
When the component is shown on the screen
hide()
When the component is removed from the screen
hover()
When the mouse is hovered over the component
hover_out()
When the mouse is hovered out of the component
set_property(css_property, css_value)
Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.
add_event(event_name, event_handler)
Adds an event handler for any supported JS event. Useful for listening to events that are not directly available
Using Javascriptadd_preset(preset)
Appends a new preset to the component if it has not been added yet. Ignored otherwise
remove_preset(preset)
Removes a preset from the component if added. Ignored otherwise
toggle_preset(preset)
If the preset is already added, it will be removed. Otherwise, it will be added.
Using PresetsTextArea
TextArea allows you to take a multiline input text from the user
html_tag - string
Example Value - "input"
The HTML tag to be used in this component.
Some tags may give unexpected results
preset - list
Example Value - ["rounded-card", "big-text"]
Apply a predefined set of styles to the component
Using Presetstext - string
Example Value - "Hello World" or "<b>Hello</b> World"
The text to display inside the component. Can be plain text or HTML
placeholder - string
Example Value - "Enter Your Message"
The text to display when the user has not entered any value
text_align - enum ("left", "center", "right", "justify")
Example Value - "center"
Specifies the text alignment
font_size - string / integer
Example Value - "14" or "1.1em" or 14
The size of the text font. Supports all CSS units. Any integer or numeric string will default to px
font - string
Example Value - "Roboto"
The font family used for the Text
font_weight - string / integer
Example Value - "bold" or "400" or 600
The font weight sets the boldness of the text. Can take string or numeric values
foreground - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
background - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
height - string / number
Example Value - 400 or "400px" or "30vh"
The height of the component
width - string / number
Example Value - 400 or "400px" or "30vw"
The width of the component
visible - boolean
Example Value - True
Whether to display this component or hide it from view
enabled - boolean
Example Value - True
Whether to allow interaction on this component or not.
border_radius - string / integer
Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"
The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_size - string / integer
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")
Example Value - "solid"
The style of the border. Defaults to None (no border)
border_color - string
Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"
The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
margin - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
padding - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
css - string
Example Value - "font-size: 40px"
Allows injecting custom CSS into the component. Follows a simpler CSS syntax.
Using Custom CSSfocus_css - string
Example Value - "border: solid black 2px"
Allows defining custom CSS for when the component is focused. Follows a simpler CSS syntax.
Using Custom CSShover_css - string
Example Value - "color: red"
Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.
Using Custom CSSdisabled_css - string
Example Value - "opacity: 0.5"
Allows defining custom CSS for when the component is disabled. Follows a simpler CSS syntax.
Using Custom CSSplaceholder_css - string
Example Value - "color: #aaa"
CSS styles applied to the placeholder text
Using Custom CSSattributes - string
Example Value - "aria-label: close"
Add additional HTML attributes to the element using a key:value pair.
change()
Fires when the value is changed and the component loses focus (This behavior is different from the default change event on anvil since it doesn't fire immediately after the value is changed).
input()
Fires immediately when the value is changed. (This behavior is similar to the default change event on Anvil)
focus()
When the component receives focus
lost_focus()
When the component loses focus
show()
When the component is shown on the screen
hide()
When the component is removed from the screen
hover()
When the mouse is hovered over the component
hover_out()
When the mouse is hovered out of the component
set_property(css_property, css_value)
Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.
add_event(event_name, event_handler)
Adds an event handler for any supported JS event. Useful for listening to events that are not directly available
Using Javascriptadd_preset(preset)
Appends a new preset to the component if it has not been added yet. Ignored otherwise
remove_preset(preset)
Removes a preset from the component if added. Ignored otherwise
toggle_preset(preset)
If the preset is already added, it will be removed. Otherwise, it will be added.
Using PresetsImage
Image allows you to display an image
html_tag - string
Example Value - "input"
The HTML tag to be used in this component.
Some tags may give unexpected results
preset - list
Example Value - ["rounded-card", "big-text"]
Apply a predefined set of styles to the component
Using Presetssource - string / anvil.Media
Example Value - "https://example.com/image.png" or BlobMedia(b"...")
The image to display in the Image component. You can directly enter the URL of an image or use any Anvil Media component.
alt - string
Example Value - "Dog"
An alternative text to be displayed if the image cannot be displayed or if the user is using a screen reader
display_mode - enum("cover", "contain", "fill", "scale_down")
Example Value - "cover"
Let's you control how the image is displayed. Equivalent to the object-fit property of CSS.
background - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
height - string / number
Example Value - 400 or "400px" or "30vh"
The height of the component
width - string / number
Example Value - 400 or "400px" or "30vw"
The width of the component
visible - boolean
Example Value - True
Whether to display this component or hide it from view
border_radius - string / integer
Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"
The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_size - string / integer
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")
Example Value - "solid"
The style of the border. Defaults to None (no border)
border_color - string
Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"
The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
margin - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
padding - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
css - string
Example Value - "font-size: 40px"
Allows injecting custom CSS into the component. Follows a simpler CSS syntax.
Using Custom CSShover_css - string
Example Value - "background: red"
Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.
Using Custom CSSattributes - string
Example Value - "aria-label: close"
Add additional HTML attributes to the element using a key:value pair.
click()
Fires when the image is clicked
show()
When the component is shown on the screen
hide()
When the component is removed from the screen
hover()
When the mouse is hovered over the component
hover_out()
When the mouse is hovered out of the component
set_property(css_property, css_value)
Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.
add_event(event_name, event_handler)
Adds an event handler for any supported JS event. Useful for listening to events that are not directly available
Using Javascriptadd_preset(preset)
Appends a new preset to the component if it has not been added yet. Ignored otherwise
remove_preset(preset)
Removes a preset from the component if added. Ignored otherwise
toggle_preset(preset)
If the preset is already added, it will be removed. Otherwise, it will be added.
Using PresetsLink
Link lets you navigate to a specific URL.
html_tag - string
Example Value - "div"
The HTML tag to be used in this component.
Some tags may give unexpected results
preset - list
Example Value - ["rounded-card", "big-text"]
Apply a predefined set of styles to the component
Using Presetshref - string
Example Value - "https://example.com"
The URL to navigate to upon clicking the link. Can accept absolute or relative paths
target - enum("_blank", "_self", "_parent", "_top")
Example Value - "_blank"
Specifies where to open the URL. Learn more -
text - string
Example Value - "Hello World" or "<b>Hello</b> World"
The text to display inside the component. Can be plain text or HTML
text_type - enum ("plain", "html")
Example Value - "html"
Whether to render the text as plain or HTML
text_align - enum ("left", "center", "right", "justify")
Example Value - "center"
Specifies the text alignment
font_size - string / integer
Example Value - "14" or "1.1em" or 14
The size of the text font. Supports all CSS units. Any integer or numeric string will default to px
font - string
Example Value - "Roboto"
The font family used for the Text
font_weight - string / integer
Example Value - "bold" or "400" or 600
The font weight sets the boldness of the text. Can take string or numeric values
foreground - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
background - string
Example Value - "#ffffff" or "rgba(255, 255, 255, 0.8)" or "theme:White"
The background color of the text. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
height - string / number
Example Value - 400 or "400px" or "30vh"
The height of the component
width - string / number
Example Value - 400 or "400px" or "30vw"
The width of the component
visible - boolean
Example Value - True
Whether to display this component or hide it from view
enabled - boolean
Example Value - True
Whether to allow interaction on this component or not\
border_radius - string / integer
Example Value - 20 or "50%" or "25 10 30 20" or "25px 30px"
The roundness of the component's corners. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_size - string / integer
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
The size of the component's border. Can take a numeric value (defaults to px), a CSS value, or multiple values for different corners separated by a space.
border_style - enum ("solid", "dotted", "dashed", "double", "groove", "ridge", "inset", "outset")
Example Value - "solid"
The style of the border. Defaults to None (no border)
border_color - string
Example Value - "#000" or "rgba(0, 0, 0, 0.8)" or "theme:Black"
The color of the border. Can take hex codes, color names, rgba, hsl, etc., as well as anvil theme colors
margin - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the outer spacing around the component. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
padding - string
Example Value - 2 or "2px" or "2px 5px" or "2 5 10 3"
Sets the inner spacing between content and border. Can take a numeric value (defaults to px), other CSS values, or multiple values for different corners separated by a space.
icon - icon
Example Value - "fa:user" or "fas:user" or "bi:person" or "mi:person"
Sets the icon for the component. Supports Font Awesome, Material Icons and Bootstrap Icons.
icon_align - enum ("left", "right", "top", "bottom")
Example Value - "right"
Sets the alignment of the icon with respect to the text
icon_size - string or number
Example Value - 20 or "15px" or "1.1em"
Sets the size of the icon. Supports all CSS units. Any integer or numeric string will default to px
custom_icon - string
Example Value - "<svg ...> </svg>"
Allows you to create a custom icon by directly defining the raw HTML. Useful if you wish to use images or SVGs as icons
css - string
Example Value - "font-size: 40px"
Allows injecting custom CSS into the component. Follows a simpler CSS syntax.
Using Custom CSShover_css - string
Example Value - "color: red"
Allows defining custom CSS for when the component is hovered. Follows a simpler CSS syntax.
Using Custom CSSdisabled_css - string
Example Value - "opacity: 0.5"
Allows defining custom CSS for when the component is disabled. Follows a simpler CSS syntax.
Using Custom CSSactive_css - string
Example Value - "background: theme:Primary"
Allows defining custom CSS for when the component is active (i.e., when it has been clicked). Follows a simpler CSS syntax.
Using Custom CSSicon_css - string
Example Value - "color: gold"
Allows defining custom CSS for the component's icon. Follows a simpler CSS syntax.
Using Custom CSSattributes - string
Example Value - "aria-label: close"
Add additional HTML attributes to the element using a key:value pair.
click()
When the component is clicked
show()
When the component is shown on the screen
hide()
When the component is removed from the screen
hover()
When the mouse is hovered over the component
hover_out()
When the mouse is hovered out of the component
set_property(css_property, css_value)
Sets the value of a CSS property. Useful for managing other CSS properties that are not directly available.
add_event(event_name, event_handler)
Adds an event handler for any supported JS event. Useful for listening to events that are not directly available
Using Javascriptadd_preset(preset)
Appends a new preset to the component if it has not been added yet. Ignored otherwise
remove_preset(preset)
Removes a preset from the component if added. Ignored otherwise
toggle_preset(preset)
If the preset is already added, it will be removed. Otherwise, it will be added.
Using PresetsLast updated