Skip to content
Home

Component Properties

Every Component has its own properties to make them work for a variety of cases. You may have a look at the table describing all the possibilities. Check out for example the Button Properties.

Naming

Both the properties- and event names should use camelCase to support a universal naming convention.

Large Buttons & Icons

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

<Button

  variant="secondary"

  text="Secondary Button"

  icon="chevron_right_medium"

  size="large"

/>

<Button icon="chevron_right" icon_size="medium" size="large" />

Extended example

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"

      icon={hamburgerIcon}

      size="default"

      on_click={myHandler}

    />

    <Button variant="secondary" size="default" on_click={myHandler}>

      <Icon icon={hamburgerIcon} />

    </Button>

  </Wrapper>,

)