logo

eola Style Guide 2024: Info Bar

Info Bar

The InfoBar component is used as state of information. Mainly for vouchers.

Examples

InfoBar

<Grid gridGap={2}  width="100%">
  <InfoBar icon="voucher" onClick={() => {alert('Run some action')}} variant="feature">
    I have a voucher
  </InfoBar>
  
  <InfoBar variant="info" size="small" >
    This is a simple message.
  </InfoBar>
  
  <InfoBar variant="error" icon="info" size="small" >
    Invalid card details
  </InfoBar>
</Grid>