# Examples

### Increasing the size of buttons

In this example, we are illustrating how to increase the size of buttons on an app, view, and component-level respectively.

#### App level

In the app's `config.json` file we can define a custom theme which, optionally, extends an existing theme. In this case, we are extending the predefined `light` theme, and configure some attributes of the `button` component.

{% code title="config.json" %}

```json
{
  "name": "custom-light-theme",
  "extends": ["light"],
  "components": {
    "button": {
      "font-size": 22,
      "icon-size": 24,
      "content-padding": 26
    }
  }
}
```

{% endcode %}

We then set this custom theme as the app-level theme when the app loads. When this theme is active, all buttons within the app will have these attributes, unless they are overridden on a view or component level per the below.

{% code title="main.js" %}

```javascript
function init() {
  // initialize any data here that should be available when the view is shown
  journey.config.setTheme("custom-light-theme");
}
```

{% endcode %}

#### View level

Within a view's config file we can further customize a theme that we have defined in `config.json`. In this example, we are further increasing the `content-padding` for buttons in the "Inventory" view. This customization will only apply to buttons within the "Inventory" view.

{% code title="inventory.config.json" %}

```json
{
  "name": "custom-light-theme",
  "components": {
    "button": {
      "content-padding": 32
    }
  }
}
```

{% endcode %}

#### Component level

We can customize specific components by defining a theme and applying that theme to components using the `theme` attribute:

{% code title="config.json" %}

```json
{
  "name": "large-buttons",
  "components": {
    "button": {
      "font-size": 22,
      "icon-size": 24,
      "content-padding": 26
    }
  }
}
```

{% endcode %}

{% code title="inventory.view\.xml" %}

```xml
<button label="Hello World" theme="large-buttons" on-press="helloWorld()" validate="false" />
```

{% endcode %}

Alternatively, we can configure these attributes on a component directly (this is useful if you want to override attributes for a single component):

{% code title="inventory.view\.xml" %}

```xml
<button label="Hello World" font-size="24" icon-size="26" content-padding="28" on-press="helloWorld()" validate="false" />
```

{% endcode %}

### Enabling or disabling `object-table` column filters

{% code title="config.json" %}

```json
{
  "name": "custom-light-theme",
  "components": {
    "object-table": {
      "default-filter": true
    }
  }
}
```

{% endcode %}

***