Banner

Web
Native

Usage

import { Box, Banner } from '@gympass/yoga';

<Box
  display="flex"
  flexDirection="column"
  flex={1}
  justifyContent="space-between"
>
  <Banner
    margin="small"
    variant='success'
    message='Success Banner'
  />
  <Banner
    margin="small"
    variant='informative'
    message='Informative Banner' 
  />
  <Banner
    margin="small"
    variant='attention'
    message='Attention Banner' 
  />
</Box><Box
  display="flex"
  flexDirection="column"
  flex={1}
  justifyContent="space-between"
>
  <Banner
    margin="small"
    variant='success'
    message='Success Banner'
  />
  <Banner
    margin="small"
    variant='informative'
    message='Informative Banner' 
  />
  <Banner
    margin="small"
    variant='attention'
    message='Attention Banner' 
  />
</Box>

import { CheckedFull, AlertCircle, AlertTriangle } from '@gympass/yoga-icons';
import { Box, Banner } from '@gympass/yoga';

<Box
  display="flex"
  flexDirection="column"
  flex={1}
  justifyContent="space-between"
>
  <Banner
    icon={CheckedFull}
    margin="small"
    variant='success'
    message='Success Banner'
  />
  <Banner
    icon={AlertCircle}
    margin="small"
    variant='informative'
    message='Informative Banner' 
  />
  <Banner
    icon={AlertTriangle}
    margin="small"
    variant='attention'
    message='Attention Banner' 
  />
</Box><Box
  display="flex"
  flexDirection="column"
  flex={1}
  justifyContent="space-between"
>
  <Banner
    icon={CheckedFull}
    margin="small"
    variant='success'
    message='Success Banner'
  />
  <Banner
    icon={AlertCircle}
    margin="small"
    variant='informative'
    message='Informative Banner' 
  />
  <Banner
    icon={AlertTriangle}
    margin="small"
    variant='attention'
    message='Attention Banner' 
  />
</Box>

import { Box, Banner } from '@gympass/yoga';

render(() => {
  const successBannerProps = {
    variant: 'success',
    message: 'Success Banner',
  };

  const informativeBannerProps = {
    variant: 'informative',
    message: 'Informative Banner',
  };

  const attentionBannerProps = {
    variant: 'attention',
    message: 'Attention Banner',
  };

  const handleOnAction = (message) => {
    alert(`This is your custom action ${message}`);
  };

  return (
    <Box
      display="flex"
      flexDirection="column"
      flex={1}
      justifyContent="space-between"
    >
      
      <Banner
        margin="small"
        variant={successBannerProps.variant}
        message={successBannerProps.message}
        primaryButton={{
          label: 'Custom Action',
          action: () => handleOnAction(successBannerProps.message),
        }}
      />

      <Banner
        margin="small"
        variant={informativeBannerProps.variant}
        message={informativeBannerProps.message}
        primaryButton={{
          label: 'Custom Action',
          action: () => handleOnAction(informativeBannerProps.message),
        }}
      />

      <Banner
        margin="small"
        variant={attentionBannerProps.variant}
        message={attentionBannerProps.message}
        primaryButton={{
          label: 'Custom Action',
          action: () => handleOnAction(attentionBannerProps.message),
        }}
      />
    </Box>
  );
});render(() => {
  const successBannerProps = {
    variant: 'success',
    message: 'Success Banner',
  };

  const informativeBannerProps = {
    variant: 'informative',
    message: 'Informative Banner',
  };

  const attentionBannerProps = {
    variant: 'attention',
    message: 'Attention Banner',
  };

  const handleOnAction = (message) => {
    alert(`This is your custom action ${message}`);
  };

  return (
    <Box
      display="flex"
      flexDirection="column"
      flex={1}
      justifyContent="space-between"
    >
      
      <Banner
        margin="small"
        variant={successBannerProps.variant}
        message={successBannerProps.message}
        primaryButton={{
          label: 'Custom Action',
          action: () => handleOnAction(successBannerProps.message),
        }}
      />

      <Banner
        margin="small"
        variant={informativeBannerProps.variant}
        message={informativeBannerProps.message}
        primaryButton={{
          label: 'Custom Action',
          action: () => handleOnAction(informativeBannerProps.message),
        }}
      />

      <Banner
        margin="small"
        variant={attentionBannerProps.variant}
        message={attentionBannerProps.message}
        primaryButton={{
          label: 'Custom Action',
          action: () => handleOnAction(attentionBannerProps.message),
        }}
      />
    </Box>
  );
});

import { Box, Banner } from '@gympass/yoga';

render(() => {
  const successBannerProps = {
    variant: 'success',
    message: 'Success Banner',
  };

  const informativeBannerProps = {
    variant: 'informative',
    message: 'Informative Banner',
  };

  const attentionBannerProps = {
    variant: 'attention',
    message: 'Attention Banner',
  };

  const handleOnAction = (message) => {
    alert(`This is your custom action ${message}`);
  };

  return (
    <Box
      display="flex"
      flexDirection="column"
      flex={1}
      justifyContent="space-between"
    >
      
      <Banner
        margin="small"
        variant={successBannerProps.variant}
        message={successBannerProps.message}
        primaryButton={{
          label: 'Primary Action',
          action: () => handleOnAction(successBannerProps.message),
        }}
        secondaryButton={{
          label: 'Secondary Action',
          action: () => handleOnAction(successBannerProps.message),
        }}
      />

      <Banner
        margin="small"
        variant={informativeBannerProps.variant}
        message={informativeBannerProps.message}
        primaryButton={{
          label: 'Primary Action',
          action: () => handleOnAction(informativeBannerProps.message),
        }}
        secondaryButton={{
          label: 'Secondary Action',
          action: () => handleOnAction(informativeBannerProps.message),
        }}
      />

      <Banner
        margin="small"
        variant={attentionBannerProps.variant}
        message={attentionBannerProps.message}
        primaryButton={{
          label: 'Primary Action',
          action: () => handleOnAction(attentionBannerProps.message),
        }}
        secondaryButton={{
          label: 'Secondary Action',
          action: () => handleOnAction(attentionBannerProps.message),
        }}
      />
    </Box>
  );
});render(() => {
  const successBannerProps = {
    variant: 'success',
    message: 'Success Banner',
  };

  const informativeBannerProps = {
    variant: 'informative',
    message: 'Informative Banner',
  };

  const attentionBannerProps = {
    variant: 'attention',
    message: 'Attention Banner',
  };

  const handleOnAction = (message) => {
    alert(`This is your custom action ${message}`);
  };

  return (
    <Box
      display="flex"
      flexDirection="column"
      flex={1}
      justifyContent="space-between"
    >
      
      <Banner
        margin="small"
        variant={successBannerProps.variant}
        message={successBannerProps.message}
        primaryButton={{
          label: 'Primary Action',
          action: () => handleOnAction(successBannerProps.message),
        }}
        secondaryButton={{
          label: 'Secondary Action',
          action: () => handleOnAction(successBannerProps.message),
        }}
      />

      <Banner
        margin="small"
        variant={informativeBannerProps.variant}
        message={informativeBannerProps.message}
        primaryButton={{
          label: 'Primary Action',
          action: () => handleOnAction(informativeBannerProps.message),
        }}
        secondaryButton={{
          label: 'Secondary Action',
          action: () => handleOnAction(informativeBannerProps.message),
        }}
      />

      <Banner
        margin="small"
        variant={attentionBannerProps.variant}
        message={attentionBannerProps.message}
        primaryButton={{
          label: 'Primary Action',
          action: () => handleOnAction(attentionBannerProps.message),
        }}
        secondaryButton={{
          label: 'Secondary Action',
          action: () => handleOnAction(attentionBannerProps.message),
        }}
      />
    </Box>
  );
});

Props

The Banner component also has support for margins and paddings props as you can see more details our system

Prop	Description	Type	Default	Required

Banner

Usage

Banner default

Banner with icon

Banner with action button

Banner with two buttons

Props