Description

You can promote certain features in your UI by using special styles from the FeatureHighlight package.

All components from the FeatureHighlight package are wrappers over our standard components, such as Button or Notice, and you can use all their standard properties.

General principles

• Make sure there's no more than 1–2 highlighted features on the page at the same time.
• Replace the highlighted control with its standard version after approximately a month of promotion.
• For controls with animation on click, consider turning off the animation after several clicks if the control is likely to be clicked multiple times.
• If the control's text doesn't mention the promotion, add an accessible description. Refer to the examples in the following sections.

Badge

To add more accent to Input, TabLine, or other components, use the BadgeFH component.

import { BadgeFH } from '@semcore/feature-highlight';
import React from 'react';

const Demo = () => (
  <BadgeFH>AI-powered</BadgeFH>
);

export default Demo;

Button

To highlight a Button, use the ButtonFH component.

For the primary button, use the standard addon.

For the secondary button, use the special icon addon (ButtonFH.Addon component), which has a built-in click animation.

You can change the number of animated sparkles (animatedSparkleCount prop) or disable the animation (set animatedSparkleCount to 0 or undefined).

If the control's text doesn't mention the promotion, add an accessible description with aria-describedby and ScreenReaderOnly.

import { Flex, ScreenReaderOnly } from '@semcore/base-components';
import { ButtonFH, BadgeFH } from '@semcore/feature-highlight';
import SummaryAI from '@semcore/icon/SummaryAI/m';
import React from 'react';

const Demo = () => (
  <>
    <Flex flexWrap gap={4}>

      <ButtonFH
        aria-describedby='button-aria-desc'
        use='primary'
        addonLeft={SummaryAI}
        size='l'
      >
        Primary Large
      </ButtonFH>
      <ScreenReaderOnly id='button-aria-desc'>
        Powered by AI
      </ScreenReaderOnly>

      <ButtonFH size='l'>
        <ButtonFH.Addon animatedSparkleCount={5} />
        <ButtonFH.Text>
          Secondary Large
        </ButtonFH.Text>
        <ButtonFH.Addon>
          <BadgeFH>AI-powered</BadgeFH>
        </ButtonFH.Addon>
      </ButtonFH>

    </Flex>
    <Flex flexWrap gap={4} mt={4}>

      <ButtonFH
        aria-describedby='button-aria-desc'
        use='primary'
        addonLeft={SummaryAI}
      >
        Primary Medium
      </ButtonFH>

      <ButtonFH aria-describedby='button-aria-desc'>
        <ButtonFH.Addon animatedSparkleCount={5} />
        <ButtonFH.Text>Secondary Medium</ButtonFH.Text>
      </ButtonFH>
    </Flex>
  </>
);

export default Demo;

Checkbox

To highlight a Checkbox, use the CheckboxFH component.

You can enable animation on click (AnimatedSparkles component). It's possible to change the number of animated sparkles (count prop).

You can add more accent by displaying the SummaryAI icon with the --intergalactic-icon-primary-feature-highlight color after the text label.

If the control's label doesn't mention the promotion, add an accessible description with aria-describedby and ScreenReaderOnly.

import { Flex, ScreenReaderOnly } from '@semcore/base-components';
import Checkbox from '@semcore/checkbox';
import { CheckboxFH, BadgeFH } from '@semcore/feature-highlight';
import SummaryAI from '@semcore/icon/SummaryAI/m';
import { Text, List } from '@semcore/typography';
import React from 'react';

const Demo = () => (
  <Flex direction='column' gap={6}>

    <fieldset style={{ border: 'none' }}>
      <Text tag='legend' size={200} mb={3}>
        List with a highlighted checkbox
      </Text>
      <List marker='' m={0} p={0}>
        <List.Item p={0} mb={2}>
          <CheckboxFH aria-describedby='checkbox-aria-desc'>
            <CheckboxFH.Value />
            <CheckboxFH.AnimatedSparkles count={5} />
            <CheckboxFH.Text>
              First option
              <SummaryAI
                color='--intergalactic-icon-primary-feature-highlight'
                ml={2}
                style={{ verticalAlign: -3 }}
              />
            </CheckboxFH.Text>
          </CheckboxFH>
          <ScreenReaderOnly id='checkbox-aria-desc'>
            Powered by AI
          </ScreenReaderOnly>
        </List.Item>
        <List.Item p={0}>
          <Checkbox label='Second option' />
        </List.Item>
      </List>
    </fieldset>

    <fieldset style={{ border: 'none' }}>
      <Text tag='legend' size={300} mb={3}>
        Large list with a highlighted checkbox
      </Text>
      <List marker='' m={0} p={0}>
        <List.Item p={0} mb={2}>
          <CheckboxFH size='l' defaultChecked>
            <CheckboxFH.Value />
            <CheckboxFH.AnimatedSparkles count={5} />
            <CheckboxFH.Text>
              First option
              <BadgeFH ml={2}>AI-powered</BadgeFH>
            </CheckboxFH.Text>
          </CheckboxFH>
        </List.Item>
        <List.Item p={0}>
          <Checkbox size='l' label='Second option' />
        </List.Item>
      </List>
    </fieldset>

  </Flex>
);

export default Demo;

DataTable

To highlight a table column, display the SummaryAI icon with the --intergalactic-icon-primary-feature-highlight color in the column header.

If the column title doesn't mention the promotion, add a ScreenReaderOnly text to the column header.

import { Flex, ScreenReaderOnly } from '@semcore/base-components';
import { DataTable } from '@semcore/data-table';
import type { DataTableSort } from '@semcore/data-table';
import SummaryAI from '@semcore/icon/SummaryAI/m';
import React from 'react';

const Demo = () => {
  const [sort, setSort] = React.useState<DataTableSort<keyof typeof data[0]>>(['cpc', 'desc']);
  const handleSortChange: (sort: DataTableSort<string>, e?: React.SyntheticEvent) => void = (
    newSort,
  ) => {
    setSort(newSort as DataTableSort<SortableColumn>);
  };
  return (
    <Flex gap={6} direction='column'>

      <DataTable
        data={data}
        sort={sort}
        onSortChange={handleSortChange}
        aria-label='Primary table with highlighted column'
        wMax='800px'
        columns={[
          {
            name: 'keyword',
            children: 'Keyword',
          },
          {
            name: 'kd',
            children: (
              <>
                <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />
                KD %
                <ScreenReaderOnly>Powered by AI</ScreenReaderOnly>
              </>
            ),
            sortable: true,
            style: { gap: '4px' },
            justifyContent: 'end',
          },
          {
            name: 'cpc',
            children: 'CPC',
            sortable: true,
            justifyContent: 'end',
          },
        ]}
      />

      <DataTable
        use='secondary'
        data={data}
        aria-label='Secondary table with highlighted column'
        wMax='300px'
        columns={[
          {
            name: 'keyword',
            children: 'Keyword',
          },
          {
            name: 'kd',
            children: (
              <>
                <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />
                KD %
                <ScreenReaderOnly>Powered by AI</ScreenReaderOnly>
              </>
            ),
            style: { gap: '4px' },
            justifyContent: 'end',
          },
          {
            name: 'cpc',
            children: 'CPC',
            justifyContent: 'end',
          },
        ]}
      />

    </Flex>
  );
};

type SortableColumn = Exclude<keyof typeof data[0], 'keyword'>;

const data = [
  {
    keyword: 'ebay buy',
    kd: '77.8',
    cpc: '$1.25',
  },
  {
    keyword: 'ebay buy',
    kd: '77.8',
    cpc: '$1.25',
  },
];

export default Demo;

Input

To highlight an Input, use the InputFH component.

You can add more accent by using the special icon addon (InputFH.Addon component) and/or the special badge (BadgeFH component).

If the control's label doesn't mention the promotion, add an accessible description by connecting the control with the badge or the ScreenReaderOnly text via aria-describedby.

import { Flex, ScreenReaderOnly } from '@semcore/base-components';
import { InputFH, BadgeFH } from '@semcore/feature-highlight';
import React from 'react';

const Demo = () => (
  <Flex direction='column' gap={4}>

    <InputFH w={200}>
      <InputFH.Addon />
      <InputFH.Value
        placeholder='Your domain'
        aria-label='Highlighted input'
        aria-describedby='input-aria-desc'
      />
    </InputFH>
    <ScreenReaderOnly id='input-aria-desc'>
      Powered by AI
    </ScreenReaderOnly>

    <InputFH w={300} size='l'>
      <InputFH.Addon />
      <InputFH.Value
        placeholder='Your domain'
        aria-label='Large highlighted input'
        aria-describedby='input-badge'
      />
      <InputFH.Addon>
        <BadgeFH id='input-badge'>AI powered</BadgeFH>
      </InputFH.Addon>
    </InputFH>

  </Flex>
);

export default Demo;

Notice

To highlight a Notice, use the NoticeFH component.

import { NoticeFH } from '@semcore/feature-highlight';
import React from 'react';

const Demo = () => (
  <NoticeFH closable aria-label='Highlighted notice'>
    We have a new feature!
  </NoticeFH>
);

export default Demo;

Pills

To highlight a Pills.Item, use the PillsFH component for the entire pill group, and the HighlightedItem component for the highlighted item.

You can add more accent by using the special icon addon (HighlightedItem.Addon component), which has a built-in click animation.

It's possible to change the number of animated sparkles (animatedSparkleCount prop) or disable the animation (set animatedSparkleCount to 0 or undefined).

If the control's text or badge doesn't mention the promotion, add an accessible description with aria-describedby and ScreenReaderOnly.

import { Flex, ScreenReaderOnly } from '@semcore/base-components';
import { PillsFH, BadgeFH } from '@semcore/feature-highlight';
import React from 'react';

const Demo = () => (
  <Flex direction='column' gap={4} alignItems='start'>
    <ScreenReaderOnly id='pills-aria-desc'>
      Powered by AI
    </ScreenReaderOnly>

    <PillsFH defaultValue={1} aria-label='Pills with highlighted item'>
      <PillsFH.Item value={1}>One</PillsFH.Item>
      <PillsFH.HighlightedItem
        value={2}
        aria-describedby='pills-aria-desc'
      >
        <PillsFH.HighlightedItem.Addon animatedSparkleCount={5} />
        <PillsFH.HighlightedItem.Text>Two</PillsFH.HighlightedItem.Text>
      </PillsFH.HighlightedItem>
      <PillsFH.Item value={3}>Three</PillsFH.Item>
    </PillsFH>

    <PillsFH
      defaultValue={3}
      aria-label='Large pills with highlighted item'
      size='l'
    >
      <PillsFH.Item value={1}>One</PillsFH.Item>
      <PillsFH.Item value={2}>Two</PillsFH.Item>
      <PillsFH.HighlightedItem value={3}>
        <PillsFH.HighlightedItem.Addon animatedSparkleCount={5} />
        <PillsFH.HighlightedItem.Text>Three</PillsFH.HighlightedItem.Text>
        <PillsFH.HighlightedItem.Addon>
          <BadgeFH>AI-powered</BadgeFH>
        </PillsFH.HighlightedItem.Addon>
      </PillsFH.HighlightedItem>
    </PillsFH>
  </Flex>
);

export default Demo;

Radio

To highlight a Radio button, use the RadioFH component.

You can enable animation on click (AnimatedSparkles component). It's possible to change the number of animated sparkles (count prop).

You can add more accent by displaying the SummaryAI icon with the --intergalactic-icon-primary-feature-highlight color after the text label.

If the control's label doesn't mention the promotion, add an accessible description with aria-describedby and ScreenReaderOnly.

import { Flex, ScreenReaderOnly } from '@semcore/base-components';
import { RadioFH, BadgeFH } from '@semcore/feature-highlight';
import SummaryAI from '@semcore/icon/SummaryAI/m';
import Radio, { RadioGroup } from '@semcore/radio';
import { Text } from '@semcore/typography';
import React from 'react';

const Demo = () => (
  <Flex direction='column' gap={6}>

    <RadioGroup
      name='radio'
      aria-labelledby='radioGroup'
      defaultValue={2}
    >
      <Text id='radioGroup' size={200} mb={2}>
        Highlighted radio button
      </Text>
      <Flex gap={3} direction='column' alignItems='start'>
        <RadioFH value={1}>
          <RadioFH.Value>
            <Radio.Value.Control aria-describedby='radio-aria-desc' />
            <Radio.Value.RadioMark />
          </RadioFH.Value>
          <RadioFH.AnimatedSparkles count={5} />
          <RadioFH.Text>
            First option
            <SummaryAI
              color='--intergalactic-icon-primary-feature-highlight'
              ml={2}
              style={{ verticalAlign: -3 }}
            />
          </RadioFH.Text>
        </RadioFH>
        <ScreenReaderOnly id='radio-aria-desc'>
          Powered by AI
        </ScreenReaderOnly>
        <Radio value={2} label='Second option' />
      </Flex>
    </RadioGroup>

    <RadioGroup
      name='radio-l'
      aria-labelledby='radioGroup-l'
      size='l'
      defaultValue={1}
    >
      <Text id='radioGroup-l' size={300} mb={2}>
        Large highlighted radio button
      </Text>
      <Flex gap={3} direction='column' alignItems='start'>
        <RadioFH value={1}>
          <RadioFH.Value />
          <RadioFH.AnimatedSparkles count={5} />
          <RadioFH.Text>
            First option
            <BadgeFH ml={2}>AI-powered</BadgeFH>
          </RadioFH.Text>
        </RadioFH>
        <Radio value={2} label='Second option' />
      </Flex>
    </RadioGroup>

  </Flex>
);

export default Demo;

Select

To highlight a Select, use the SelectFH component.

You can add more accent by using the special icon addon (SelectFH.Trigger.Addon component).

If the control's text or badge doesn't mention the promotion, add an accessible description with aria-describedby and ScreenReaderOnly.

import { Flex, ScreenReaderOnly } from '@semcore/base-components';
import { SelectFH, BadgeFH } from '@semcore/feature-highlight';
import Select from '@semcore/select';
import React from 'react';

const Demo = () => {
  const [selectValue, setSelectValue] = React.useState('');
  const [selectValueL, setSelectValueL] = React.useState('');

  return (
    <Flex direction='column' gap={4} alignItems='start'>

      <SelectFH onChange={setSelectValue}>
        <SelectFH.Trigger
          aria-label='Highlighted select'
          aria-describedby='select-aria-desc'
        >
          <SelectFH.Trigger.Addon />
          <SelectFH.Trigger.Text>{selectValue}</SelectFH.Trigger.Text>
        </SelectFH.Trigger>
        <SelectFH.Menu>
          <SelectFH.Option value='One'>One</SelectFH.Option>
          <SelectFH.Option value='Two'>Two</SelectFH.Option>
          <SelectFH.Option value='Three'>Three</SelectFH.Option>
        </SelectFH.Menu>
      </SelectFH>
      <ScreenReaderOnly id='select-aria-desc'>
        Powered by AI
      </ScreenReaderOnly>

      <SelectFH onChange={setSelectValueL} size='l'>
        <SelectFH.Trigger aria-label='Large highlighted select'>
          <SelectFH.Trigger.Addon />
          <SelectFH.Trigger.Text>{selectValueL}</SelectFH.Trigger.Text>
          <SelectFH.Trigger.Addon ml={2}>
            <BadgeFH>AI-powered</BadgeFH>
          </SelectFH.Trigger.Addon>
        </SelectFH.Trigger>
        <SelectFH.Menu>
          <SelectFH.Option value='One'>One</SelectFH.Option>
          <SelectFH.Option value='Two'>Two</SelectFH.Option>
          <SelectFH.Option value='Three'>Three</SelectFH.Option>
        </SelectFH.Menu>
      </SelectFH>

    </Flex>
  );
};

export default Demo;

Switch

To highlight a Switch, use the SwitchFH component.

You can enable animation on click (AnimatedSparkles component). It's possible to change the number of animated sparkles (count prop).

You can add more accent by displaying the SummaryAI icon with the --intergalactic-icon-primary-feature-highlight color after the text label.

If the control's label doesn't mention the promotion, add an accessible description with aria-describedby and ScreenReaderOnly.

import { Flex, ScreenReaderOnly } from '@semcore/base-components';
import { SwitchFH, BadgeFH } from '@semcore/feature-highlight';
import SummaryAI from '@semcore/icon/SummaryAI/m';
import React from 'react';

const Demo = () => (
  <Flex direction='column' gap={4} alignItems='start'>

    <SwitchFH>
      <SwitchFH.Value aria-describedby='switch-aria-desc' ml={0} />
      <SwitchFH.AnimatedSparkles count={5} />
      <SwitchFH.Addon>
        Medium switch
        <SummaryAI
          color='--intergalactic-icon-primary-feature-highlight'
          ml={2}
          style={{ verticalAlign: 'middle' }}
        />
      </SwitchFH.Addon>
    </SwitchFH>
    <ScreenReaderOnly id='switch-aria-desc'>
      Powered by AI
    </ScreenReaderOnly>

    <SwitchFH size='l'>
      <SwitchFH.Value
        aria-describedby='switch-aria-desc'
        defaultChecked
        ml={0}
      />
      <SwitchFH.AnimatedSparkles count={5} />
      <SwitchFH.Addon>
        Large switch
        <SummaryAI
          color='--intergalactic-icon-primary-feature-highlight'
          ml={2}
          style={{ verticalAlign: -3 }}
        />
      </SwitchFH.Addon>
    </SwitchFH>

    <SwitchFH size='xl'>
      <SwitchFH.Value ml={0} />
      <SwitchFH.AnimatedSparkles count={5} />
      <SwitchFH.Addon>Extra large switch</SwitchFH.Addon>
      <BadgeFH ml={2}>AI-powered</BadgeFH>
    </SwitchFH>

  </Flex>
);

export default Demo;

TabLine

To highlight a TabLine.Item, use the TabLineFH component for the entire tab group, and the HighlightedItem component for the highlighted item.

You can add more accent by using the special icon addon (HighlightedItem.Addon component) before the text, and/or the special badge (BadgeFH component) after the text.

The icon addon has a built-in animation. You can change the number of animated sparkles (animatedSparkleCount prop) or disable the animation (set animatedSparkleCount to 0 or undefined).

If the control's text or badge doesn't mention the promotion, add an accessible description with aria-describedby and ScreenReaderOnly.

import { Flex, ScreenReaderOnly } from '@semcore/base-components';
import { TabLineFH, BadgeFH } from '@semcore/feature-highlight';
import React from 'react';

const Demo = () => (
  <Flex direction='column' gap={4}>

    <TabLineFH
      size='m'
      aria-label='Tabs with highlighted item'
      defaultValue={1}
    >
      <TabLineFH.Item value={1}>First option</TabLineFH.Item>
      <TabLineFH.HighlightedItem
        value={2}
        aria-describedby='tab-aria-desc'
      >
        <TabLineFH.HighlightedItem.Addon animatedSparkleCount={5} />
        <TabLineFH.HighlightedItem.Text>
          Second option
        </TabLineFH.HighlightedItem.Text>
      </TabLineFH.HighlightedItem>
      <TabLineFH.Item value={3}>Third option</TabLineFH.Item>
    </TabLineFH>

    <ScreenReaderOnly id='tab-aria-desc'>
      Powered by AI
    </ScreenReaderOnly>

    <TabLineFH
      size='l'
      aria-label='Large tabs with highlighted item'
      defaultValue={2}
    >
      <TabLineFH.Item value={1}>First option</TabLineFH.Item>
      <TabLineFH.HighlightedItem value={2}>
        <TabLineFH.HighlightedItem.Addon animatedSparkleCount={5} />
        <TabLineFH.HighlightedItem.Text>
          Second option
        </TabLineFH.HighlightedItem.Text>
        <TabLineFH.HighlightedItem.Addon>
          <BadgeFH>AI-powered</BadgeFH>
        </TabLineFH.HighlightedItem.Addon>
      </TabLineFH.HighlightedItem>
      <TabLineFH.Item value={3}>Third option</TabLineFH.Item>
    </TabLineFH>

  </Flex>
);

export default Demo;