Counter

Counter in filters

FilterTrigger is normally used together with Select or Dropdown. Go to the guide for more information.

tsx

import React from 'react';
import Counter, { AnimatedNumber } from 'intergalactic/counter';
import { FilterTrigger } from 'intergalactic/base-trigger';

const Demo = () => (
  <FilterTrigger>
    <FilterTrigger.Text>Link to website</FilterTrigger.Text>
    <FilterTrigger.Addon>
      <Counter theme='bg-primary-info'>
        <AnimatedNumber value={500} delay={1000} formatValue={(x) => Math.round(x).toString()} />
      </Counter>
    </FilterTrigger.Addon>
  </FilterTrigger>
);

export default Demo;

import React from 'react';
import Counter, { AnimatedNumber } from 'intergalactic/counter';
import { FilterTrigger } from 'intergalactic/base-trigger';

const Demo = () => (
  <FilterTrigger>
    <FilterTrigger.Text>Link to website</FilterTrigger.Text>
    <FilterTrigger.Addon>
      <Counter theme='bg-primary-info'>
        <AnimatedNumber value={500} delay={1000} formatValue={(x) => Math.round(x).toString()} />
      </Counter>
    </FilterTrigger.Addon>
  </FilterTrigger>
);

export default Demo;

Counter in Button

TIP

Don't forget to place counters inside the Addon to create correct margins.

tsx

import React from 'react';
import Counter from 'intergalactic/counter';
import Button from 'intergalactic/button';
import SettingsM from 'intergalactic/icon/Settings/m';

const Demo = () => (
  <>
    <Button mr={4}>
      <Button.Addon>
        <SettingsM />
      </Button.Addon>
      <Button.Text>Manage columns</Button.Text>
      <Button.Addon>
        <Counter>23</Counter>
      </Button.Addon>
    </Button>
    <Button use='primary'>
      <Button.Addon>
        <SettingsM />
      </Button.Addon>
      <Button.Text>Manage columns</Button.Text>
      <Button.Addon>
        <Counter theme='bg-primary-neutral'>23</Counter>
      </Button.Addon>
    </Button>
  </>
);

export default Demo;

import React from 'react';
import Counter from 'intergalactic/counter';
import Button from 'intergalactic/button';
import SettingsM from 'intergalactic/icon/Settings/m';

const Demo = () => (
  <>
    <Button mr={4}>
      <Button.Addon>
        <SettingsM />
      </Button.Addon>
      <Button.Text>Manage columns</Button.Text>
      <Button.Addon>
        <Counter>23</Counter>
      </Button.Addon>
    </Button>
    <Button use='primary'>
      <Button.Addon>
        <SettingsM />
      </Button.Addon>
      <Button.Text>Manage columns</Button.Text>
      <Button.Addon>
        <Counter theme='bg-primary-neutral'>23</Counter>
      </Button.Addon>
    </Button>
  </>
);

export default Demo;

Counter in forms

TIP

As design guide recommends, the counter changes color to orange and then red when the limit is reached and exceeded, respectively. This rule isn’t implemented in the example.

tsx

import React from 'react';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
import Textarea from 'intergalactic/textarea';
import Counter from 'intergalactic/counter';
import { ScreenReaderOnly } from 'intergalactic/utils/lib/ScreenReaderOnly';

const Demo = () => (
  <Flex direction='column' w={350}>
    <Flex mb={2} justifyContent='space-between'>
      <Text size={200} tag='label' htmlFor='limited-text-field'>
        Label <ScreenReaderOnly>characters limit</ScreenReaderOnly>
        <Counter ml={1}>
          {0}
          <ScreenReaderOnly>characters</ScreenReaderOnly>
          <span aria-hidden='true'>/</span>
          <ScreenReaderOnly>of</ScreenReaderOnly>
          {150}
          <ScreenReaderOnly>maximum</ScreenReaderOnly>
        </Counter>
      </Text>
      <Text size={200} color='text-secondary'>
        optional
      </Text>
    </Flex>
    <Textarea placeholder='Placeholder' id='limited-text-field' />
  </Flex>
);

export default Demo;

import React from 'react';
import { Flex } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
import Textarea from 'intergalactic/textarea';
import Counter from 'intergalactic/counter';
import { ScreenReaderOnly } from 'intergalactic/utils/lib/ScreenReaderOnly';

const Demo = () => (
  <Flex direction='column' w={350}>
    <Flex mb={2} justifyContent='space-between'>
      <Text size={200} tag='label' htmlFor='limited-text-field'>
        Label <ScreenReaderOnly>characters limit</ScreenReaderOnly>
        <Counter ml={1}>
          {0}
          <ScreenReaderOnly>characters</ScreenReaderOnly>
          <span aria-hidden='true'>/</span>
          <ScreenReaderOnly>of</ScreenReaderOnly>
          {150}
          <ScreenReaderOnly>maximum</ScreenReaderOnly>
        </Counter>
      </Text>
      <Text size={200} color='text-secondary'>
        optional
      </Text>
    </Flex>
    <Textarea placeholder='Placeholder' id='limited-text-field' />
  </Flex>
);

export default Demo;

Counter and typography

The text counters shall be implemented using Typography without using the Counter component.

tsx

import React from 'react';
import { Text } from 'intergalactic/typography';

const Demo = () => (
  <>
    <Text size={300}>
      Lorem ipsum <Text color='text-secondary'>12,457</Text>
    </Text>
    <br />
    <Text size={300}>
      Dolor sit amet: <Text color='text-secondary'>149</Text>
    </Text>
  </>
);

export default Demo;

import React from 'react';
import { Text } from 'intergalactic/typography';

const Demo = () => (
  <>
    <Text size={300}>
      Lorem ipsum <Text color='text-secondary'>12,457</Text>
    </Text>
    <br />
    <Text size={300}>
      Dolor sit amet: <Text color='text-secondary'>149</Text>
    </Text>
  </>
);

export default Demo;

Counter in Pills

As you can see, there are text counters inside Pills. Implement them via Typography, as well, without using the Counter component.

tsx

import React from 'react';
import Pills from 'intergalactic/pills';
import { Text } from 'intergalactic/typography';

const Demo = () => (
  <Pills defaultValue='all'>
    <Pills.Item value='all'>
      <Pills.Item.Text>All</Pills.Item.Text>
      <Pills.Item.Addon>
        <Text color='text-secondary'>1,259</Text>
      </Pills.Item.Addon>
    </Pills.Item>
    <Pills.Item value='follow'>
      <Pills.Item.Text>Follow</Pills.Item.Text>
      <Pills.Item.Addon>
        <Text color='text-secondary'>557</Text>
      </Pills.Item.Addon>
    </Pills.Item>
    <Pills.Item value='not-follow'>
      <Pills.Item.Text>Not Follow</Pills.Item.Text>
      <Pills.Item.Addon>
        <Text color='text-secondary'>736</Text>
      </Pills.Item.Addon>
    </Pills.Item>
  </Pills>
);

export default Demo;

import React from 'react';
import Pills from 'intergalactic/pills';
import { Text } from 'intergalactic/typography';

const Demo = () => (
  <Pills defaultValue='all'>
    <Pills.Item value='all'>
      <Pills.Item.Text>All</Pills.Item.Text>
      <Pills.Item.Addon>
        <Text color='text-secondary'>1,259</Text>
      </Pills.Item.Addon>
    </Pills.Item>
    <Pills.Item value='follow'>
      <Pills.Item.Text>Follow</Pills.Item.Text>
      <Pills.Item.Addon>
        <Text color='text-secondary'>557</Text>
      </Pills.Item.Addon>
    </Pills.Item>
    <Pills.Item value='not-follow'>
      <Pills.Item.Text>Not Follow</Pills.Item.Text>
      <Pills.Item.Addon>
        <Text color='text-secondary'>736</Text>
      </Pills.Item.Addon>
    </Pills.Item>
  </Pills>
);

export default Demo;

Counter in limits

Implement the text counters in limits using Typography without using the Counter component.

tsx

import React from 'react';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
import ProgressBar from 'intergalactic/progress-bar';
import WarningM from 'intergalactic/icon/Warning/m';

const Demo = () => (
  <Flex direction='column' w={350}>
    <Flex mb={1} justifyContent='space-between'>
      <Text size={200}>SEO Ideas Units</Text>
      <Flex alignItems='center'>
        <WarningM color='icon-primary-warning' />
        <Text size={200} ml={1} bold>
          10<Text color='text-secondary'>/10</Text>
        </Text>
      </Flex>
    </Flex>
    <ProgressBar theme='bg-primary-warning' size='s' />
  </Flex>
);

export default Demo;

import React from 'react';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
import ProgressBar from 'intergalactic/progress-bar';
import WarningM from 'intergalactic/icon/Warning/m';

const Demo = () => (
  <Flex direction='column' w={350}>
    <Flex mb={1} justifyContent='space-between'>
      <Text size={200}>SEO Ideas Units</Text>
      <Flex alignItems='center'>
        <WarningM color='icon-primary-warning' />
        <Text size={200} ml={1} bold>
          10<Text color='text-secondary'>/10</Text>
        </Text>
      </Flex>
    </Flex>
    <ProgressBar theme='bg-primary-warning' size='s' />
  </Flex>
);

export default Demo;

Counter in Dot

The Dot component can also contain a text counter. For more information, see the Dot.

tsx

import React from 'react';
import Button from 'intergalactic/button';
import NotificationM from 'intergalactic/icon/Notification/m';
import Dot from 'intergalactic/dot';
import { AnimatedNumber } from 'intergalactic/counter';

const Demo = () => (
  <Button aria-label='Open notifications'>
    <Button.Addon>
      <NotificationM />
      <Dot up aria-labelledby='notifications-counter'>
        <AnimatedNumber
          id='notifications-counter'
          aria-label='You have 18 unread notifications'
          initValue={10}
          value={18}
          duration={1000}
          delay={500}
          formatValue={(x) => Math.round(x).toString()}
        />
      </Dot>
    </Button.Addon>
  </Button>
);

export default Demo;

import React from 'react';
import Button from 'intergalactic/button';
import NotificationM from 'intergalactic/icon/Notification/m';
import Dot from 'intergalactic/dot';
import { AnimatedNumber } from 'intergalactic/counter';

const Demo = () => (
  <Button aria-label='Open notifications'>
    <Button.Addon>
      <NotificationM />
      <Dot up aria-labelledby='notifications-counter'>
        <AnimatedNumber
          id='notifications-counter'
          aria-label='You have 18 unread notifications'
          initValue={10}
          value={18}
          duration={1000}
          delay={500}
          formatValue={(x) => Math.round(x).toString()}
        />
      </Dot>
    </Button.Addon>
  </Button>
);

export default Demo;

Accessibility

Writing code

CSS Injection

Counter in filters

Counter in Button

Counter in forms

Counter and typography

Counter in Pills

Counter in limits

Counter in Dot

Accessibility

CSS Injection

Counter

Counter in filters ​

Counter in Button ​

Counter in forms ​

Counter and typography ​

Counter in Pills ​

Counter in limits ​

Counter in Dot ​

Counter in filters

Counter in Button

Counter in forms

Counter and typography

Counter in Pills

Counter in limits

Counter in Dot