Tabs

bk-tabs renders a TabItem[] as either underlined text tabs (variant="default") or a segmented pill-in-a-track (variant="segmented"), in either orientation. Play with the controls below to see how the inputs combine before the fixed examples further down.

bk-tabsNavigationAngular

Preview

A working preview of Tabs in the Brickclay style. Try it.

Interact with the preview to see events here.

Interactive playground

Table
Kanban
Calendar

Active: table

orientation

icon direction

Event log

Interact with the playground to see emitted events.

Default variant, Horizontal (variant="default", orientation="horizontal")

Text only

Resources
Location

Text only, [disabled]="true"

With icons

With icons, [disabled]="true"

Icon position (TabItem.direction)

Icon left, direction: 'left'

Icon right, direction: 'right'

Mixed (left / right / none)

Segmented variant, Horizontal (variant="segmented")

Default colors

Daily
Weekly
Monthly

With icons (left / right)

Custom colors, [colors]

Error state (TabItem.error, showErrorIcon, errorIcon, iconTooltip)

When a tab is in an error state you can optionally surface an error icon (on the direction side) whose tooltip carries the message. If showErrorIcon is off, the tooltip falls back to the tab itself. Omit errorIcon to use the default red alert icon. Hover the error tabs below to see the tooltips.

Default variant, with error icon (showErrorIcon: true, direction: 'right')

Information
Billing
Settings

Default variant, no icon, tooltip on the tab

Segmented variant, with default error icon (showErrorIcon: true, direction: 'left')

Segmented variant, no icon, tooltip on the tab

With decorative icons + error, all 4 layout variations (error icon replaces the tab's own icon)

Default, horizontal

Default, vertical

Segmented, horizontal

Segmented, vertical

Lock navigation while a tab has an error `[lockNavigationOnError]`="true"

Optional. When the active tab is in error, the other tabs render disabled so the user must resolve the error before moving on. Below, "Billing" is in error, try clicking "Information" or "Settings": navigation is blocked.

Default variant

Segmented variant

API reference

Component inputs / outputs <`bk-tabs`>

Name	Type	Default	Possible values	Description
`list`	`TabItem[]`	`[]`	array of tabs	The tabs to render. See TabItem below.
`activeTabId`	`string`	`''`	any tab id	Id of the currently selected tab.
`orientation`	`TabsOrientation`	`'horizontal'`	`'horizontal' \| 'vertical'`	Lay the tabs out in a row or a stacked column.
`variant`	`TabsVariant`	`'default'`	`'default' \| 'segmented'`	Underlined/plain tabs vs. a segmented pill-in-a-track.
`disabled`	`boolean`	`false`	`true \| false`	Disables the whole tab group.
`lockNavigationOnError`	`boolean`	`false`	`true \| false`	When on and the active tab has error, the other tabs are disabled until it clears.
`colors`	`TabsColors`	`{}`	Tailwind class map	Per-usage colors for the segmented variant. See TabsColors below.
`change`	`EventEmitter<TabItem>`	–	output	Emits the selected tab when the user changes tabs.

Tab item TabItem

Property	Type	Required	Possible values	Description
`id`	`string`	`Yes`	unique string	Unique identifier, matched against activeTabId.
`label`	`string`	`Yes`	any text	Visible tab text.
`icon`	`string`	`No`	asset URL	Icon for the inactive state.
`iconActive`	`string`	`No`	asset URL	Icon for the active state; falls back to icon.
`iconAlt`	`string`	`No`	any text	Alt text for the icon; defaults to label.
`direction`	`TabIconDirection`	`No`	`'left' \| 'right'`	Which side of the label the icon sits on. Default 'left'.
`disabled`	`boolean`	`No`	`true \| false`	Disables just this tab.
`error`	`boolean`	`No`	`true \| false`	Marks the tab as errored (red styling).
`showErrorIcon`	`boolean`	`No`	`true \| false`	In an error state, render an error icon (on the direction side) with the tooltip on it. Off → tooltip falls back to the tab.
`errorIcon`	`string`	`No`	asset URL	Custom error icon; omit to use the default red alert icon.
`iconTooltip`	`string \| string[]`	`No`	text / lines	Tooltip content, shown on the icon when present, otherwise on the tab (in error state).
`iconTooltipDirection`	`string`	`No`	`'top' \| 'bottom' \| 'left' \| 'right'`	Tooltip placement. Default 'top'.

Segmented colors TabsColors (variant="segmented")

Property	Type	Default token	Description
`wrapper`	`string`	#54578E12	Track background classes, e.g. !bg-white.
`active`	`string`	#FFFFFF	Active pill background classes.
`activeText`	`string`	#15191E	Active pill text classes.
`inactive`	`string`	#6B7080	Inactive pill text classes.

Pass Tailwind classes (not raw colors). Because the component uses emulated encapsulation, prefix with ! (e.g. !bg-white) so they out-specify the default rules. Any field left undefined keeps the default token.