Skip to content

Ai.Welcome#

Info
Demos
Properties

Experimental: The AI extension and its component APIs may change in the future. Please give us feedback on your experience with them.

Demos#

Welcome with suggestions#

Hi Matthias

Where do you want to start today?

<Welcome
  greeting="Hi Matthias"
  avatar={<Avatar size="small" icon={aino} hasLabel />}
  title="Where do you want to start today?"
>
  <Suggestions>
    <Suggestion suggestion="Make a transfer" />
    <Suggestion suggestion="Look at my spendings" />
    <Suggestion suggestion="Pay a bill" />
  </Suggestions>
</Welcome>

Long labels in a narrow container#

Suggestion labels wrap inside their buttons, including long words and translated text.

Hei Matthias

Hva vil du gjøre i dag?

<Welcome
  style={{
    width: '13.75rem',
    maxWidth: '100%',
  }}
  greeting="Hei Matthias"
  avatar={<Avatar size="small" icon={aino} hasLabel />}
  title="Hva vil du gjøre i dag?"
>
  <Suggestions>
    <Suggestion suggestion="Vis betalingsoppdragsoversikten" />
    <Suggestion suggestion="Hjelp meg å forstå forbruket mitt denne måneden" />
  </Suggestions>
</Welcome>
Suggest an edit