# Constants (/syntax/constants)



Constants allow you to define reusable values that can be referenced throughout your components and styles, making your code more maintainable and consistent.

Overview [#overview]

Constants can be defined to replace any value with a selected type or to be used as special values. The supported types are:

* `int` - 32bit integers
* `color` - Color values (e.g., `0xff0000`)
* `px` - Pixel measurements
* `percentage` - Percentage values
* `string` - Text strings
* `opa` - Opacity values
* `bool` - Boolean true/false values

Defining Constants [#defining-constants]

Constants are defined within the `<consts>` tag:

```xml title="xml" lineNumbers=1
<consts>
  <color name="color1" value="0xff0000" help="Primary color"/>
  <px name="pad_xs" value="8" help="Small padding"/>
</consts>
```

Each constant has:

* `name` - The identifier to reference this constant
* `value` - The actual value
* `type` - The value type (determined by the tag name)
* `help` - Optional description for documentation

Using Constants [#using-constants]

Constants can be used in:

* Style properties
* Widget properties
* Component properties

Constant values are referenced using the `#` symbol followed by the constant name. For example:

```xml title="xml" lineNumbers=1
<components>
  <consts>
    <color name="red" value="0xff0000" help="A pure red color"/>
    <int name="long" value="200" help="Just large number"/>
    <string name="greeting" value="Hi There!" help="Just be nice"/>
  </consts>
  
  <styles>
    <style name="style_1" bg_color="#red"/>
  </styles>

  <view width="#long">
    <style name="style_1"/>
    <lv_label text="#greeting"/>
  </view>
</components>
```