SectionLabel

The small label above a group of rows outside a popup: a sidebar's groups, a palette's sections, the name of a field. Inside a menu the same job is Menu.GroupLabel or Menu.Label.

tsx

import { SectionLabel } from '@basmilius/react-ui';

tsx

import { ListRow, SectionLabel } from '@basmilius/react-ui';

export default function SectionLabelDemo() {
    return (
        <div className="flex w-64 flex-col gap-1 rounded-lg border border-border bg-surface p-2">
            <SectionLabel render={<h3 />} className="px-2 pt-1">
                Recent projects
            </SectionLabel>
            <ListRow variant="inset" className="text-sm text-text">
                Website
            </ListRow>
            <ListRow variant="inset" className="text-sm text-text">
                Mobile app
            </ListRow>
        </div>
    );
}

It is a <span> unless render makes it a heading or a <label>. It takes the line height of the row it sits in. Write it in sentence case, never uppercase.

SectionLabel takes the props of a <span>, className, ref and render. SectionLabelProps is an exported type.

SectionLabel ​

SectionLabel