---
description: >-
title: Component properties
version: 11.17.0
generatedAt: 2026-11-05T09:55:47.156Z
checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40
---

# Component properties

Every [Component](/web/components/overview) has properties to support different use cases. Each component's Properties page describes the available options, such as the [Button properties](/web/components/button/properties).

## Intended use and customization

Start with the component's documented patterns and defaults. The demos show intended usage, but cannot cover every valid use case.

Some properties support specific integrations or give Eufemia components flexibility internally. Their availability does not mean every possible customization is a recommended design. Technical customization examples illustrate what the API allows.

Follow the usage guidance beside each property. Changes to a component's established appearance, content structure, or interaction pattern beyond the documented patterns need a use case approved by DNB UX. Properties marked internal are intended for Eufemia's own integrations.

The same guidance applies when configuring components through nested props, Provider, or custom CSS.

## Naming

Both the properties- and event names should use **camelCase** to support a universal [naming convention](/web/contribute/guidelines/naming).

## Large Buttons & Icons

Below are some examples. You can even modify them right away in the Browser.


```tsx
<Button variant="secondary" text="Secondary Button" icon="chevron_right_medium" size="large" />
<Button title="Next" icon="chevron_right" iconSize="medium" size="large" />
```


## Extended example

This technical customization example changes the button's shape and icon color. Use it to understand the styling options. A product use case for this appearance needs DNB UX approval.


```tsx
const Wrapper = styled.div`
        .dnb-button {
          --button-width: 4rem;
          --button-height: 4rem;
          --button-border-radius: 2rem;
          svg {
            color: fuchsia;
          }
        }
      `;
const myHandler = () => alert('Hello');
render(<Wrapper>
          <Button variant="secondary" title="Menu" icon={hamburgerIcon} size="default" onClick={myHandler} />
          <Button variant="secondary" title="Menu" size="default" onClick={myHandler}>
            <Icon icon={hamburgerIcon} />
          </Button>
        </Wrapper>);
```