Card control

Migration

Same props, same defaults — move them onto Card and add preset="control".

// Before
import { CardControl } from '@brikdesigns/bds';

<CardControl
  title="Email notifications"
  description="Receive a weekly digest"
  badge={<Badge status="positive">On</Badge>}
  action={<Switch checked={enabled} onChange={handleChange} />}
/>

// After
import { Card } from '@brikdesigns/bds';

<Card
  preset="control"
  title="Email notifications"
  description="Receive a weekly digest"
  badge={<Badge status="positive">On</Badge>}
  action={<Switch checked={enabled} onChange={handleChange} />}
/>

The preset adds slots CardControl never had — logo (integration logomark), connectionStatus, and lastSynced for third-party service cards. See Card → Control preset.

The reference below documents the frozen CardControl API for migration. New code should use Card preset="control".

CardControl is a locked-down settings-row card. Leading badge or icon, title + description in the middle, action (Switch / Button / link) on the right. Use for notification toggles, feature flags, and any settings panel where each row's affordance matters.

Use it for

• Settings rows ("Email notifications" + Switch on/off)
• Feature flag toggles in admin panels
• Status/state displays where a badge + name + value+action layout fits
• Stacks of these in a CardList for full settings panels

For a flexible-content card, use Card default mode. For stat tiles, use Card preset="summary".

Import

import { CardControl } from '@brikdesigns/bds';

Variants

Default

<CardControl
  title="Notifications"
  description="Receive email notifications for updates"
  badge={<Badge size="xs" status="positive" icon={<CheckIcon />} />}
  action={<Switch checked={enabled} onChange={handleChange} />}
/>

Action types

action accepts any ReactNode — Switch, Button, link, or compound content.

<CardControl
  title="Two-factor authentication"
  description="Required for admin accounts"
  action={<Button variant="outline" size="sm">Set up</Button>}
/>

<CardControl
  title="API access"
  description="Generate tokens for integrations"
  action={<TextLink href="/settings/api">Manage</TextLink>}
/>

Action alignment

Use actionAlign="top" when the description wraps to multiple lines — anchors the action to the upper-right corner instead of the vertical center.

<CardControl
  title="Storage"
  description="You're using 8.2 GB of your 10 GB plan. Upgrade for more or clean up old assets to make space."
  action={<Button size="sm">Upgrade</Button>}
  actionAlign="top"
/>

Pattern: settings panel

Stack CardControls inside a CardList with gap="sm" for a clean settings-page layout.

<CardList gap="sm">
  <CardControl
    title="Email notifications"
    description="Daily digest"
    action={<Switch checked={email} onChange={(e) => setEmail(e.target.checked)} />}
  />
  <CardControl
    title="SMS notifications"
    description="Urgent alerts only"
    action={<Switch checked={sms} onChange={(e) => setSms(e.target.checked)} />}
  />
  <CardControl
    title="Slack integration"
    description="Connect a workspace"
    action={<Button variant="outline" size="sm">Connect</Button>}
  />
</CardList>

When not to use

• Don't use CardControl for free-form content. Use Card default mode — CardControl's locked layout doesn't accept arbitrary children.
• Don't use CardControl when the action isn't always present. A row without an action reads as broken in this layout.

Accessibility

• Renders a <div>. The action element keeps its own semantics (Switch is a switch, Button is a button).
• For full accessibility, the action element should pair with the title via aria-labelledby on the action — most often automatic for Switch when a label is provided.

API

Plus standard <div> HTML attributes.

Related

• Card — flexible-content sibling. Card preset="control" is API-equivalent to CardControl.
• CardList — wrapper for stacking multiple CardControls
• Toggle Switch — most common action content
• Storybook playground