Cannot center text in chip

[katie-weisenberger]

Prerequisites

• I have read the Contributing Guidelines.
• I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

When using the ix-chip component, if I manually set a width of the chip, the text is automatically aligned left, and cannot be changed. I would like to be able to center the text.

I tried justify-content: center and align-content: center but this didn't work.

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

v2.7.0

Code to produce this issue.

<ix-chip
    class="chip-btn"
    [active]="true"
    [outline]="true"
    variant="primary"
    background="var(--theme-color-ghost--hover)"
  >
    Testing1234
  </ix-chip>

.chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13rem;
  height: 2rem;
  border-radius: 50px;
}

[github-actions]

🤖 Hello @katie-weisenberger

Your issue will be analyzed and is part of our internal workflow.
To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-2645

[danielleroux]

@katie-weisenberger as a workaround you can try the following:

<ix-chip
    [active]="true"
    [outline]="true"
    variant="primary"
  >
    <div class="chip-btn">Testing1234</div>
</ix-chip>

.chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13rem;
}

[katie-weisenberger]

@katie-weisenberger as a workaround you can try the following:

<ix-chip
    [active]="true"
    [outline]="true"
    variant="primary"
  >
    <div class="chip-btn">Testing1234</div>
</ix-chip>

.chip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13rem;
}

That worked for me, thank you so much!