Settings

SettingsSecurityItem

A security feature row with icon, label, description, status badge, and configurable action button.

Settings

The Settings category provides two layout-aware row components designed for settings and account pages. They follow a consistent two-column layout (text on the left, control on the right) and are intended to be composed inside UCard containers or plain div wrappers.

Components

`<XASettingsSecurityItem />`

A security feature row with an icon badge on the left, a title and description in the center, and an action button on the right. When active is true, the icon changes to a checkmark, the background highlights in primary color, and the icon container turns green — providing clear visual confirmation that the feature is enabled. A badge prop (e.g., "Enabled", "Recommended") can be displayed inline with the title.

<UCard>
  <template #header>Security</template>
  <div class="space-y-3 p-4">
    <!-- Feature enabled -->
    <XASettingsSecurityItem
      icon="i-lucide-shield-check"
      label="Two-Factor Authentication"
      description="Enabled via authenticator app"
      badge="Enabled"
      badge-color="success"
      action-label="Manage"
      active
      @click="manage2FA"
    />

    <!-- Feature not yet configured -->
    <XASettingsSecurityItem
      icon="i-lucide-key"
      label="Passkey"
      description="Sign in without a password using biometrics."
      action-label="Set up"
      :loading="settingUpPasskey"
      @click="setupPasskey"
    />

    <!-- Custom action slot -->
    <XASettingsSecurityItem
      label="Active Sessions"
      description="You have 3 active sessions across 2 devices."
    >
      <template #action>
        <UButton size="sm" variant="ghost" @click="viewSessions">View</UButton>
        <UButton size="sm" color="error" variant="ghost" @click="revokeAll">Revoke All</UButton>
      </template>
    </XASettingsSecurityItem>
  </div>
</UCard>

Props

Prop	Type	Default	Description
`label`	`String`	required	Security feature label
`description`	`String`	`''`	Description text
`icon`	`String`	`''`	Lucide icon name for the left icon badge
`badge`	`String`	`''`	Badge text (e.g., `'Enabled'`, `'Recommended'`)
`badgeColor`	`String`	`'neutral'`	Badge color
`actionLabel`	`String`	`'Configure'`	Action button label
`buttonVariant`	`String`	`'outline'`	Action button variant
`buttonColor`	`String`	`'neutral'`	Action button color
`active`	`Boolean`	`false`	Whether this security feature is currently active
`loading`	`Boolean`	`false`	Loading state on the action button
`disabled`	`Boolean`	`false`	Disable the action button
`containerClass`	`String`	`''`	Additional classes for the root element
`iconContainerClass`	`String`	`'bg-neutral-200 dark:bg-neutral-700'`	Icon container background when not active
`iconClass`	`String`	—	Additional classes for the icon

Slots

Slot	Description
`action`	Replace the default action button with custom controls

Events

Event	Payload	Description
`click`	—	Emitted when the action button is clicked

AI Context

component: XASettingsSecurityItem
package: "@xenterprises/nuxt-x-app"
category: Settings
use-when: >
  Use XASettingsSecurityItem for security-related features that require a setup
  or management action, such as 2FA, passkeys, connected apps, or session
  management. Stack inside a UCard with a space-y layout.

Edit this pageorReport an issue

Permission

Renderless gate component for role-based conditional rendering.

SettingsPreference

A labeled toggle row for boolean user preferences, with optional description and loading state.